vue computed 与 watch 的区别

computed 与 watch 作为 vue 的两大监听器，在vue中是必不可少的。
那么他们有什么区别呢 ？

1. 计算属性 computed

1. 简单的应用：

<div>{{ fullName}}</div>
new Vue({
    data() {
        return{
            name: 'zhudying'
        }
    },
    computed: {
         fullName() {
            return '姓名：'+ this.name
        }
    }
})

这样就避免了在template里面直接计算{{this.firstNum + this.lastNum}}，因为在模版中放入太多声明式的逻辑会让模板本身过重，尤其当在页面中使用大量复杂的逻辑表达式处理数据时，会对页面的可维护性造成很大的影响，而computed的设计初衷也正是用于解决此类问题。

2. computed 中的 get 和 set 方法：

<div>{{ fullName}}</div>
<button @click="chooseData">改变Num</button>
new Vue({
    data() {
        return{
              name: 'zhudying'
        }
    },
    computed: {
        fullName: {
          // getter
          get() {
            return "姓名：" + this.name;
          },
          // setter
          set(newValue) {
            console.log(newValue, "newValue");  // zhu
            this.name = newValue;
         }
       }
    }，
    methods:{
      chooseData(){
          this.name= ‘zhu’
      }
    }
})

3. computed 特性：

1. 计算属性是基于它们的响应式依赖进行缓存的，页面重新渲染值不会变化，计算属性会立即返回之前的计算结果，除非依赖的响应式属性变化才会重新计算。
2. 不支持异步，当computed内有异步操作时无效，无法监听数据的变化。
3. 如果computed属性属性值是函数，那么默认会走get方法；函数的返回值就是属性的属性值；在computed中的，属性都有一个get和一个set方法，当数据变化时，调用set方法。

2. 侦听属性watch：

1. 简单的应用：

 new Vue({
      el: '#root',
      data: {
        obj:{
              name: 'zhudying'
          }
      },
      watch: {
        obj: {
        　  handler(newName, oldName) {
                 //  newName 变化后的新值，oldName 变化前的旧值
          　　console.log(newName,oldName)
        　　},
            // 对象和数组都是引用类型，引用类型变量存的是地址，地址没有变，所以不会触发watch。
           // 这时我们需要进行深度监听，就需要加上一个属性 deep，值为 true
            deep:true, 
          // 最初绑定的时候是不会执行的，要等到 firstName 改变时才执行监听计算
          // 这时添加属性 immediate，值为 true 时，会在一开始执行
            immediate: true  
        }
      } 
    })

watch用于观察和监听页面上的vue实例，当你需要在数据变化响应时，执行异步操作，或高性能消耗的操作，那么watch为最佳选择。

1. 不支持缓存
2. 当数据变化，会触发相应的操作
3. watch支持异步操作
4. watch之
   deep：deep的意思就是深入观察，监听器会一层层的往下遍历，给对象的所有属性都加上这个监听器，但是这样性能开销就会非常大了，任何修改obj里面任何一个属性都会触发这个监听器里的 handler。
   优化： 可以直接监听 对象中的某一属性，如：obj.name