computed是计算属性，watch是侦听器

  • computed是计算属性，通过其他变量计算得来的另一个属性，

    • 如fullname在它所依赖的firstname和lastname两个变量变化时重新计算自己的值。
    • 另外，computed具有缓存。计算属性是基于他们的依赖进行缓存的，只有相关依赖发生改变时才会重新求值，意味着如果依赖没变，多次访问计算属性都会立即返回之前的计算结果，而不必每次都执行函数
  • watch是侦听器，侦听一个特定的值，当该值变化时执行特定函数。
data() {    return {        firstname: '空条',        lastname: '承太郎',        fullname2: '空条承太郎'    }},watch: {    lastname: function(val) {        this.fullname2 = this.firstname + ' ' + val    }}// this.lasttname = '徐伦'// console.log(this.fullname2) // 空条徐伦computed: {    fullname: function(val) {        return this.firstname + ' ' + this.lastname    }} // 空条承太郎

总结：

1、也就是computed是关联多个变量的，只要其中一个变量值改变，都会触发函数；watch则只依赖一个变量，每次只能对一个变量进行监控。
2、最重要的一点是：watch是监听data里定义的值，而computed的计算属性只能在computed内，不能在data中定义，否则会报错(重复定义)，因为computed作为计算属性定义变量并返回对应的结果给这个变量，变量不可被重复定义和赋值。
3、①：computed中使用箭头函数的话，会导致this指向的不是vueComponent(因为箭头函数没有自己的this，而是和上一层作用域共享this，computed的上一层作用域可能就没有了，所以this是undefined)

②：使用function() 形式就可以解决，this指向vueComponent
③：使用对象的形式，get()、set()也都指向vueComponent （例：fullname: { get() {return this.firstname + ' ' + this.lastname}}）