vue之watch篇

Posted 2023-05-09

参考技术A

简介 ：虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的侦听器。这就是为什么 Vue 通过 watch 选项提供了一个更通用的方法，来响应数据的变化。当需要在<span style="color:red">数据变化时执行异步或开销较大的操作时</span>，这个方式是最有用的。

注意点 ：<span style="color:red">不应该使用箭头函数来定义 watcher 函数</span>

watch中的几个常见属性 :

可以在watch中执行复杂的异步操作等；这些是computed不能胜任的。具体可以参考官网的案例

注意 ：在变更 (不是替换) 对象或数组时，旧值将与新值相同，因为它们的引用指向同一个对象/数组。Vue 不会保留变更之前值的副本

语法 ： vm.$watch( expOrFn, callback, [options] )

vm.$watch ： 返回一个取消观察函数，用来停止触发回调

注意 ：组件选项中的watch中可以随着组件的销毁而销毁，而实例方法的 vm.$watch() ，我们需要手动销毁

vue之watch用法

watch是一个对象，键是需要观察的表达式，值是对应回调函数。值也可以是方法名，或者包含选项的对象 watch:{

        //属性
　　　　　msg: function(newVal,oldVal){
            console.log(oldVal+‘改变成‘+newVal)
        },　　//函数
        msg1(newVal,oldVal){
            console.log(oldVal+‘改变成‘+newVal)
        },
        msg2:[//数组
            function(newVal,oldVal){
                console.log(oldVal+‘改变成‘+newVal)
            },
            function(newVal,oldVal){
                console.log(oldVal+‘改变成‘+newVal)
            }
        ],
        msg3:{//对象
            handler:function(newVal,oldVal){
                console.log(oldVal+‘改变成‘+newVal)
            },
            deep: true
        },　　　　//对象中的属性
　　　　　‘msg.age‘: function(newVal,oldVal){
　　　　　　　　　　console.log(oldVal+‘改变成‘+newVal)
　　　　　　　　}
　　　　}