vue wathch 的多种姿势

提到vue watch就会想到和computed的区别

1. 相同点： 如果进行信息展示，二者可以实现相同的功能
2. 不同点 ，watch可能需要监听更多的监听属性 ，这时候，我们优先选择computed，不使用watch 不同点：当想在更新data 数据后再次更新数据的时候，不能使用updated生命周期钩子，建议使用watch进行监听

好了知道了不同点，可以大体知道watch是什么作用，当我们想在数据发生变化时候做一些事情，我们一般这样写

 data(val,oldval){
      // 操作
    },

或者

 data:'changeMethod'//定义的方法名

其中data就是我们想要接收到的属性，函数接受两个参数，一个是新的值，一个是旧的值。里面可以进行自己的一些操作。

但是

刚才提到，watch是在监听的对象发生变化的时候才进行执行，如果我们想在进页面的时候就让watch先执行一次，需要怎么操作呢？ 当然有办法

 data{
    handler(val,oldval){
         // 操作
    },
    immediate:true
},

将watch的目标写成对象格式，然后处理逻辑交给handler处理，接受参数不会改变，而且能根据自己需要配置自己的options，上面的immediate就是让watch在进页面的无论数据是否发生改变都会先执行一次，其他的options还有deep，async

deep

当需要监听一个对象的改变时，普通的watch方法无法监听到对象内部属性的改变，只有data中的数据才能够监听到变化，此时就需要deep属性对对象进行深度监听。