2020-09-13 浅谈： Vue watch监听deep、immediate属性

Posted 2023-04-04

参考技术A

Vue watch 用于监测数据变化，可以方便开发中对于数据的变化做出一些处理。关于deep、immdiate属性场景使用总结如 下，如有疏漏，烦请指正。

watch监听只有在数据变化时才会执行监听函数。父组件向子组件动态传值时，子组件props首次获取到父组件传来的默认值时，此时也需要执行watch监听函数。则需设置immediate：true.

需要监听复杂数据（对象）内部属性的变化时，设置deep属性。Vue会递归的侦听数据和属性的变化（性能消耗较大）。也就是给所有数据和属性添加handler执行函数。

监听notes对象，未添加deep:

执行效果

监听notes对象，，添加deep属性：

性能优化
鉴于deep属性Vue性能消耗较大，对于要监听数据中某个属性的响应时，可以只给对应属性添加deep。如下示例，只需侦听属性b的响应变化。

vue中watch简单使用

原文：https://blog.csdn.net/wangxiaoxiaosen/article/details/78487089

watch是一个对象，具有键值对；键指被监听的数据，值指处理方式。

值类型包括以下三个：

1. 第一个handler：其值是一个回调函数。即监听到变化时应该执行的函数。
2. 第二个是deep：其值是true或false；确认是否深入监听。（一般监听时是不能监听到对象属性值的变化的，数组的值变化可以听到。）
3. 第三个是immediate：其值是true或false；确认是否以当前的初始值执行handler的函数。

var vm = new Vue({
  data: {
    a: 1,
    b: 2
  },
  watch: {
    a: function (val, oldVal) {
      console.log(‘new: %s, old: %s‘, val, oldVal)
    },
    // 方法名
    b: ‘someMethod‘,
    // 选项的对象
    c: {
      handler: function (val, oldVal) { /* ... */ },
      deep: true，
      immediate: true
    }
  }
})