前端框架Vue中methods,computed,watch的调用时机的理解

Dear 丶 2022-05-11 12:22 656阅读 0赞

最近在学Vue框架的 时候对methods,computed不甚理解，看了几篇别人写的博客感觉描述的也很模糊，故而在稍微明白他们之间主要差异的时候，写篇博客记录分享一下。

methods中定义的函数，其调用时机是：当页面引用了vue data关键字的属性，并且这些属性发生改变的时候，就会执行methods中定义的函数，并且不管methods中定义的函数是否依赖了data关键字中的属性，methods中定义的函数都会被执行。methods中定义的函数能像普通函数那样，当主动调用methods中定义的函数的时候，这些函数每次调用都会执行。

2.computed中定义的函数，在computed中定义的函数的调用时机是：当页面引用了vue data关键字的属性，并且这些属性发生改变的时候，如果computed中定义的函数也依赖了这些改变的属性，那么computed中定义的函数才会被执行。也就是computed中定义的函数被Vue框架回调的条件是，1.函数内依赖了vue的属性，2.这些属性发生了改变，3.这些属性被页面引用。这三个条件同时满足，才会触发computed中定义的某个函数的回调。而且和methods定义的函数，其调用语法也是不一样的，computed中定义的函数，调用的时候后面不能有小括号，类似属性的调用。

并不是每次主动调用computed中定义的函数都会执行，computed中定义的函数即使是主动调用，其是否会执行也和内部的依赖属性是否发生改变有关。

3.watch中定义的方法是用来监听某个属性发生变化的时候，触发回调。在watch中定义方法的时候，方法的键必须是vue中已经定义的属性。

new Vue({
      el: "#app",
      data: {
       num: 1,
       num2: 2,
       value3: 88
       
      },
      methods: {
         getNum:function(){ //每次更新页面的时候就会执行
               alert("methods");
               return "现在的num：";
         }
      },
       computed: {
          getNum2:function(){ //第一次执行，后面当依赖的属性发生改变的时候执行
          alert("computed");
            return "num2："+ this.num2;
         }
      },
      watch: {
       value3: function(value){  //value3是已经在data中定义的属性，value是该属性发生改变的时候的值
        alert(" 现在的value："+ value);
       }
      }
    })

<div id="app">
    <p>{
       {num}}</p>
    <p>{
       {getNum()}}</p>
    
    <button v-on:click="num++">Num++</button>
    <button v-on:click="num--">Num--</button>
    <button v-on:click="num2++">Num2++</button>
    <button v-on:click="value3++">value3++</button>
    </div>

上面的理解，来源于代码运行情况的测试和总结，或有不周到之处，还望读者见谅。