vue中计算属性computed和watch的区别

vue3计算属性：https://vuejs.org/guide/essentials/computed.html
methods、watch、computed都是以函数为基础的，但各自却都不同。
1、methods 不存在缓存，执行一次运行一次，执行n次，运行n次。
2、computed 使用场景：当页面中有某些数据依赖其他数据进行变动的时候，可以使用计算属性；计算属性 computed 是基于data中数据进行处理的，data数据变化，他也跟着变化；
当data中数据没有发生改变时，我们调用computed中函数n次，只会执行一次，其余缓存。每个计算属性都包含两个set、get 属性。

?

1 2 3 4 5 6 7 8 9 10 11 12

var vm = new Vue({   el: '#demo',   data: {     firstName: 'Foo',     lastName: 'Bar'   },   computed: {     fullName: function () {       return this.firstName + ' ' + this.lastName     }   } })

计算属性默认只有 getter，不过在需要时你也可以提供一个 setter：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14

computed: {   fullName: {     // getter     get: function () {       return this.firstName + ' ' + this.lastName     },     // setter     set: function (newValue) {       var names = newValue.split(' ')       this.firstName = names[0]       this.lastName = names[1]     }   } }

现在再运行 vm.fullName = 'John Doe' 时，setter 会被调用，vm.firstName 和 vm.lastName 也会相应地被更新。
3、watch 数据变化时执行异步或开销较大的操作，可以随时修改状态的变化。

?

1 2 3 4 5 6 7

watch: {     // 如果 `question` 发生改变，这个函数就会运行     question: function (newQuestion, oldQuestion) {       this.answer = 'Waiting for you to stop typing...'       this.debouncedGetAnswer()     }   },

`_.debounce` 函数 (及其近亲 `_.throttle`) 的知识，请参考：https://lodash.com/docs#debounce
handler()：当页面刚进入时，自动绑定watch事件，不需要进行触发

?

1 2 3 4 5 6 7 8 9 10

watch: {// 页面加载时，就自动触发此事件   stu :{     handler(new){        this.checkName(value);        this.tip = "正在验证......";     },      immediate: true, // 代表在wacth里声明了firstName这个方法之后立即先去执行handler方法      deep:true // 意味着开启深度监听，对象 stu 里面有任何数据变化都会触发handler函数   } }

参考：https://cn.vuejs.org/v2/guide/computed.html
https://www.jianshu.com/p/a69a9bac9dc3