vue监听属性 watch的使用总结
2021/7/13 6:09:17
本文主要是介绍vue监听属性 watch的使用总结,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
目录
1.作用
2.应用场景
3.用法:
4.深度监听和立即执行(监听复杂类型)
5.总结:
1.作用
可以监听data/computed等属性值改变。
常见于监听某变量值的改变,或者对象中属性值的改变
2.应用场景
如监听路由变化
如当页面的数据变动需要做逻辑运算时
如组件创建时,监听某个变量或者某对象的值或属性改变时
如使用此属性判断父子组件传值发生时做逻辑。
3.用法:
注意:和data、methods同级
watch: { "被监听的属性名" (newVal, oldVal){ } }
小结:想要监听一个属性变化, 可使用监听属性watch
4.深度监听和立即执行(监听复杂类型)
用法:
watch: { "要监听的属性名": { immediate: true, // 立即执行 deep: true, // 深度监听复杂类型内变化 handler (newVal, oldVal) { } } }
例子:
<template> <div> <input type="text" v-model="user.name"> <input type="text" v-model="user.age"> </div> </template> <script> export default { data(){ return { user: { name: "小白", age: 18 } } }, watch: { // 固定属性(设置监听哪些属性) user: { // 具体属性名(被监听) handler(newVal, oldVal){ // 固定触发此函数 console.log(newVal); }, immediate: true, // 马上监听触发 deep: true // 深度监听(监听name和age值的改变) } } } </script>
小结: immediate立即监听, deep深度监听, handler固定方法触发
5.总结:
最常见的业务中使用思路:
监控data中某个变量的变化==>发生变化===> 逻辑运算 ===>实现功能
这篇关于vue监听属性 watch的使用总结的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-09-28基于Python+Vue开发的口腔牙科预约管理系统
- 2024-09-28基于Python+Vue开发的酒店客房预订管理系统
- 2024-09-27使用js将ETH账户的资产打散其他账户web3
- 2024-09-27我轻松地将我的 React.js 应用程序翻译成了多种语言。下面是我是如何做到的... ??
- 2024-09-27?? 使用 useMemo 和 useCallback 加速 React:告别缓慢的重新渲染!??
- 2024-09-27Vue CLI多环境配置教程:新手入门指南
- 2024-09-27Vue CLI多环境配置教程:快速入门指南
- 2024-09-27Vue CLI教程:新手入门指南
- 2024-09-27Vue CLI教程:初学者快速入门指南
- 2024-09-27Vue3公共组件教程:入门与实践