目录
方法三：使用 immediate（立即）和 deep 属性及 handler （处理者）方法
- 方法一：直接写一个监听处理函数，每次监听到属性值（如cityName）变化，执行此函数
- 方法二：监听数据后面加字符串形式方法名，方法名在 methods 中定义
- 方法三：使用 immediate（立即）属性和 handler （处理者）方法，deep 深度监测。如果只需要监听对象中的一个属性值，使用字符串形式监听对象属性名
- watch 特点
方法一：直接写一个监听处理函数
- 每次监听到属性值（如cityName）改变时，执行此函数
export default{ data () { return { cityName: '上海' } }, watch: { cityName(newVal, oldVal){ this.cityName = newVal } } } 方法二：监听数据后面加字符串形式方法名
- 方法名在 methods 中定义
export default{ data () { return { cityName: '上海' } }, watch: { cityName: 'nameChange' }, methods: { nameChange(newVal, oldVal){ this.cityName = newVal } } }方法三：使用 immediate（立即）和 deep 属性及 handler （处理者）方法
- watch 特点
- 当值第一次绑定时不会执行监听函数
- 只有值发生改变时才会执行监听函数
- 如果需要第一次绑定时执行监听函数，使用 immediate 属性 boolean 类型
- 使用方法
- 监听属性后面写成对象形式，包含 handler 方法和 immediate 属性
- immediate 属性表示 watch 首次绑定时，是否执行 handler 方法
- immediate 为 true 表示 watch 声明的时候，立即执行 handler 方法
- immediate 值为 false 则和一般 watch 用法一样，在数据发生变化时才执行 handler 方法
export default{ data () { return { cityName: '上海' } }, watch: { cityName: { handler(newVal, oldVal){ this.cityName = newVal }, immediate: true } } } deep 深度监听
- 当需要监听一个对象改变时，普通 watch 无法监听到对象内部属性变化
- 只有 data 中的数据才能够监听到对象内部属性变化
- watch 中使用 deep 属性，可以对对象中的属性进行深度监听
export default{ data () { return { cityName: {id: 1, name: '上海'} } }, watch: { cityName: { handler(newVal, oldVal){ console.log('newVal', newVal) console.log('oldVal', oldVal) }, immediate: true, deep: true, } } } - 设置 deep: true 可以监听到 cityName.name 变化
- 此时会给 cityName 所有属性都加上这个监听器
- 当对象属性较多时，每个属性值变化都会执行 handler 方法
- 如果只需要监听对象中的一个属性值，使用字符串形式监听对象属性名
export default{ data () { return { cityName: {id: 1, name: '上海'} } }, watch: { 'cityName.name': { handler(newVal, oldVal){ console.log('newVal', newVal) console.log('oldVal', oldVal) }, immediate: true, deep: true, } } }- 数组（一维、多维）变化不需要通过深度监听
- 对象数组中对象属性变化需要进行深度监听
- watch 中不要使用箭头函数，因为箭头函数中的 this 是指向当前作用域
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/199961.html原文链接：https://javaforall.net
