vue中watch和computed的区别

同

两者都可以观察页面数据的变化

异

1.在数据变化,会自动调用watch而不调用computed,只有在使用computed的值时才会调用conputed
2.多次使用computed时,如果computed所依赖的属性值没有变化,只有第一次使用会进行计算,之后的每次使用不会重新进行计算,而是会读取缓存
3.连续多次改变属性的值,watch只会执行最后一次
下面的代码只会输出一次旧值: 消息消息消息, 新值: 第三次改变

watch: {
    msg(val, oldVal){
        console.log("旧值: %s, 新值: %s", oldVal, val)
    }
},

methods: {
    init() {
        this.msg = "第一次改变"
        this.msg = "第二次改变"
        this.msg = "第三次改变"
    }
}

以下是个人理解,仅供参考

当数据变化频率不高,但是需要经过复杂计算时,使用computed
当数据变化后,需要进行一些操作,使用watch