Vue的计算属性computed、方法methods、侦听器watch的区别

1. 方法总和methods内的函数如何触发？

机制：methods内的函数和普通的函数没有区别。

触发：methods内的函数执行的时候，才能触发；

注意：当页面渲染的时候，也会执行下面代码中的methodsN函数；methods内的函数命名不能与data中的属性重名。

下面实例中的methodsName属性会添加到Vue实例的vm中，和methods一个级别

下面例子中，当点击时执行一次clickme函数：

触发方式：点击执行


 <div id="demo">
       <button @click="clickme">click me</button>
       <p>{{time}}</p>
</div>
var vm = new({
    data: {
        time: ''
    },
    methods: {
         clickme(){
          console.log("methods")
           this.time = Date();
         }
    },
 
})

结果：

2. 计算属性computed内的函数如何触发？

机制：{{函数名}} <---return <--- 值

触发：当值发生变化的时候，页面中的{{函数名}}也发生变化，就会触发该函数

注意：return 会将函数名返回到和computed一个级别，这样函数名就是Vue实例vm的属性，所以才能在标签中使用该属性

有缓存，所以该值不变下的页面渲染不会触发该函数

3. 侦听器watch内的函数如何触发？

机制：watch内的函数名 === data中的属性名

触发：data中的属性名对应的值发生改变时，就会触发watch内的函数就执行

注意：有缓存，所以该值不变下的页面渲染不会触发该函数；但代码复杂

    <div id="demo">
        <div>{{methodsN()}}执行methods内的methodsN：{{methodsName}}</div>
        <div>触发computed内的computedName：{{computedName}} {{age}}</div>
        <div>firstName的值：{{firstName}}</div>
    </div>
    <script>
        var vm = new Vue({
            el: '#demo', 
            data: {
                firstName: 'yuzhu',
                lastName: 'zhu',
                age: 22
            },
            methods: {
                //方法执行就会触发，每次页面渲染都会触发函数
                methodsN: function(){
                    console.log("计算了methods")
                    //this.methodsName 可以通过函数给vm对象添加methodsName属性
                    this.methodsName = this.firstName + this.lastName;
                }
            },
            computed: {
                //computed：计算属性，前提是：Vue的html标签中使用computed自定义的方法
                //同时，要使用return。
                // {{函数名}}  <---return   <--- 值 当值发生变化的时候，{{函数名}}对应变化
                
                computedName: function(){
                    console.log("计算了computed")
                    return this.firstName + ' ' + this.lastName //computedName属性也添加到vm对象上
                }
            },
            watch: {
                //watch：监听的是属性firstName的变化，即watch中的函数名 === data中的属性名
                //当firstName发生改变时，触发firstName这个函数
                firstName: function(){
                    console.log("计算了watch")
                }
            }
        })
    </script>

结果：页面刷新的时候触发了methods中的methodsN 和 computed中的computedName，而watch中的firstName没有触发

原因：

（1）methodsN在标签中执行，每次页面刷新都会执行，每次渲染页面都会触发，哪怕是上述例子中age值的改变，也会重排渲染页面，触发methodsN函数

（2）computedName在页面刷新的时候触发，因为Vue实例vm中本来没有computedName属性，也就是该值为undefined，当页面刷新的时候，该值改变，就会触发computedName函数；而age值的改变不会触发computedName，因为有缓存，只有当computedName值发生改变时，才会触发该函数。

（3）firstName函数没有触发，因为该值没有改变。

二、深入理解computed

内部函数可以写成对象形式，该对象内有get、set方法（系统自带），为什么还可以直接使用fullName呢？？？

     <div id="demo">{{fullName}}</div>
     <script>
         var vm = new Vue({
             el: '#demo',
             data: {
                 firstName: 1,
                 lastName: 2,
             },
             computed: {
                 fullName: {
                     get: function(){
                         return this.firstName + " " + this.lastName
                     },
                     set: function(value){
                         var arr = value.split(" ");
                         this.firstName = arr[0];
                         this.lastName = arr[1];
                     }
                 }
             }
         })
     </script>

控制台的操作：

Vue的计算属性computed、方法methods、侦听器watch的区别

猜你喜欢