vue.js中method 、computed 、watch的应用及区别，

method 和 computed 的区别

• 先来看一个例子

<div id="app">
  {{reverseMsg}}
   <hr>
  {{reverseMesssage()}}
</div>

app = new Vue({
        el:"#app",
        data:{
            msg:"hello word",
        },
        methods:{
            reverseMesssage(){
                return this.msg.split("").reverse().join("");
            },
        },
        computed:{
            reverseMsg(){
                return this.msg.split("").reverse().join("");
            },
        }
    });

• methods中的方法和computed中的计算属性方法都实现了相同的效果。但是！！！，每次运行这个，methods中的方法都会执行，而computed中的方法第一次运行后，就会缓存再内存中，如果数据源不发生改变，computed中的方法不会再执行，从而对于复杂的逻辑计算的程序提高了性能，这就是计算属性。此外，computed中的方法输入多个数据源，最后只return一个结果，是一种多对一的关系。
• 总结一下：computed缓存结果，多对一；methods不缓存。

watch的用法及与computed的区别

 <div id="app">
      {{msg}}
      <hr />
      {{msg1}} {{msg2}} {{msg3}}
      <hr />
      {{info.a}} {{info.b}}
 </div>

app = new Vue({
        el: "#app",
        data: {
          msg: "hello world",
          msg1: "",
          msg2: "",
          msg3: "",
          info: {
            a: "info.a",
            b: "info.b",
          },
        },
        watch: {
          msg: {
            handler(newValue, oldValue) {
              console.log(newValue, oldValue);
              this.msg1 = newValue + "1";
              this.msg2 = newValue + "2";
              this.msg3 = newValue + "3";
            },
            // 是否开启立即执行
            //immediate: true,
          },
          //监听对象内部
          info:{
                handler(newValue, oldValue){
                    console.log(newValue, oldValue);
                },
                //监听嵌套对象时需要配置
                deep:true
            },
          // 只监听对象中的一个元素
          "info.a": {
            handler(newValue, oldValue) {
              console.log(newValue, oldValue);
            },
            deep: true,
          },
        },
 });

• computed 多对一 ；watch 一对多
• 监听msg时，当改变msg的值时，其msg1,msg2,msg3才会发生改变