Vue中watch的用法

1、在vue中watch用来监听数据的变化，一旦发生变化可以执行一些其他操作

2、watch就是当值第一次绑定的时候，是不会执行监听函数的，只有值发生改变才会执行。如果需要在第一次绑定的时候也执行函数，则需要用到immediate属性，比如当父组件向子组件动态传值时，子组件props首次获取到父组件传来的默认值时，也需要执行函数

3、handle方法：immediate表示在watch中首次绑定的时候，是否执行handler，值为true则表示在watch中声明的时候，就立即执行handler方法，值为false，则和一般使用watch一样，在数据发生变化时才执行

4、deep，当需要监听一个对象的变化时，普通的watch方法无法监听带对象内部属性的变化，只有data中的数据才能够监听到变化，此时需要deep属性进行深度监听，设置deep：true，当对象的属性较多是，每个属性的变化都会执行handler

5、可以只监听对象的其中一个属性值，如下

watch: {
    'person.name': {
        handler(newVal, oldVal) {
            console.log(newVal, oldVal)
        },
        deep: true,
        immediate: true
    }
}

6、watch中不要使用箭头函数，即不要用箭头函数来定义watcher函数，因为箭头函数中的this是指向当前作用域，对于箭头函数来说，箭头函数中的this指向的是定义时的对象而不是函数运行时所在的对象，即全局定义时的window对象

7、方式有

watch: { // 简单监听
    pageSize(newVal, oldVal) {
      console.log(newVal, oldVal) 
    },
    person: { // 对对象进行深度监听
      handler(nv) {
        console.log(nv)
      },
      immediate: true,
      deep: true
    },
    'person.name': { // 对对象的某一个属性进行深度监听
      handler(nv) {
        console.log(nv)
      },
      immediate: true,
      deep: true
    }
 
}

8、watch和computed的区别

• 1、computed的get必须有返回值（return），而watchreturn可有可无

• 2、computed支持缓存，只有依赖的数据发生改变，才会重新进行计算，而watch不支持缓存，数据发生改变，会直接触发相应的操作

• 3、computed可以自定义名称，而watch只能监听和data里面名称相同的属性

• 4、computed适用于复杂的运算，而watch适合一些消耗性功能，比如Ajax

• 5、computed不支持异步，当computed内有异步操作是无效，无法监听数据的变化，而watch支持异步

• 6、computed属性值会默认走缓存，计算属性是基于它们的响应式依赖进行缓存的，也就是基于data中声明过或者父组件传递的props中的数据通过计算得到的值，而watch监听的函数接受两个参数，第一个是最新的值，第二个是输入之前的值

• 7、如果一个属性是由其他属性计算而来的，这个属性依赖其他属性，多对一或者一对一，一般用computed，当一个属性发生变化时，需要执行对应的操作，一对多，一般用watch