Vue:watch与computed

98 阅读1分钟

1、watch用法

简单写法

watch: {
    num(newVal, oldVal) {
        ......
    }
}

handler写法

watch: {
    num: {
        handler(newVal, oldVal) {
        //该回调将会在侦听开始之后被立即调用
        immediate: true,
        //深度监听
        deep: true
        }
    }
},

2、watch说明

1、监听数据的变化执行回调

2、不应该使用箭头函数来定义watcher 函数,箭头函数绑定了父级作用域的上下文,所以 this 将不会按照期望指向 Vue 实例

3、监听对象时,watch只会监听第一层,当修改了对象的数据时,首地址却没有修改,watch判定它没有发生数据的变化,从而监听不到

4、一对多

5、支持异步

3、computed计算属性

1、对于逻辑比较复杂的运算表达式可改用计算属性

2、多对一

3、缓存

4、不支持异步

详见官网链接