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

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

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

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

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 数据变化时执行异步或开销较大的操作，可以随时修改状态的变化。

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事件，不需要进行触发

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