vue.js中methods、computed、watch的区别

1，methods
不存在缓存，执行一次运行一次，执行n次，运行n次。

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

3，watch
使用场景：数据变化时执行异步或开销较大的操作，可以随时修改状态的变化。
watch:类似于监听机制+事件机制。在大部分情况下我们都会使用computed，但如果要在数据变化的同时进行异步操作或者是比较大的开销，那么watch为最佳选择。
watch为一个对象，键是需要观察的表达式，值是对应回调函数。值也可以是方法名，或者包含选项的对象。

// 这里直接用 v-model 来绑定，不需要添加 change 事件
<input type="text" v-model="nameValue" style="margin-top:15px" /> 
  data() {
    return {
      nameValue: "",
      tip: ""
    };
  },
  methods: {
    checkName(value) {
      var that = this;
      setTimeout(() => {
        if (value == "admin") {
          that.tip = "用户名已存在";
        } else {
          that.tip = "用户名可以使用";
        }
      }, 2000);
    }
  },
  watch: {// 数据变化时执行异步或开销较大的操作
    nameValue(value) {
      this.checkName(value);
      this.tip = "正在验证......";
    }
  }

//当num的值发生变化时，就会调用num的方法，方法里面的形参对应的是num的新值和旧值
watch:{
num:function(val,oldval){
console.log(val,oldval);
}}

watch的高级用法
上面的watch方法是当改变值时候，才会触发监听事件，但是我们想刚进入页面时候，就触发监听事件，就要用handler()方法
handler()：当页面刚进入时，自动绑定watch事件，不需要进行触发

watch: {// 页面加载时，就自动触发此事件
  nameValue:{
    handler(new){
       this.checkName(value);
       this.tip = "正在验证......";
    }
  }
}

immediate属性：布尔值
immediate：true：首次加载就监听数据变化
immediate：false：只有发生改变才监听

watch: {// 页面加载时，就自动触发此事件
  nameValue:{
    handler(new){
       this.checkName(value);
       this.tip = "正在验证......";
    },
     immediate: true 
  }
}

deep:true；是开启深层次的监听，即所有属性都加上监听器，如果其中一个发生改变了就执行handler函数。

watch: {// 页面加载时，就自动触发此事件
  nameValue:{
    handler(new){
       this.checkName(value);
       this.tip = "正在验证......";
    },
     immediate: true,
     deep:true
  }
}

来源：https://www.jianshu.com/p/a69a9bac9dc3
为了方便查，转过来了。