Vue中computed、methods、watch的区别

1.方法methods

//机制：methods内的函数和普通的函数没有区别。
//触发：methods内的函数执行的时候，才能触发；
//注意：当页面渲染的时候，也会执行下面代码中的methodsN函数；
//methods内的函数命名不能与data中的属性重名。

2.计算属性computed

//机制：{{函数名}} 《---return 《--- 参与计算的DATA中的值
//触发：当参与计算的值发生变化的时候，页面中的{{函数名}}也发生变化，就会触发该函数（函数名就是页面括号中的名称）
//注意：return 会将函数名返回到和computed一个级别，这样函数名就是Vue实例vm的属性，所以才能在标签中使用该属性
//有缓存，所以该值不变下的页面渲染不会触发该函数,只有数据发送变化时触发


//案例解析get方法直接计算出函数fullName的值，而set方法，可以对fullName进行修改操作,通过computed中的方法通过set改变data中的属性的值（此场景应该比较少）。
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];
                     }
                 }
          }
 })
//注意：computed中定义的函数，调用的时候后面不能有小括号，类似属性的调用.     

3.侦听器watch

//机制：watch内的函数名 === data中的属性名（一定监听的是data中已经存在的数据）
//触发：data中的属性名对应的值发生改变时，就会触发watch内的函数就执行
//注意：有缓存，所以该值不变下的页面渲染不会触发该函数（监听的是data中已存在的数据并把名称作为函数名）；
<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: 'andy',
                lastName: 'royal',
                age: 22
            },
            methods: {
                //方法执行就会触发，每次页面渲染都会触发函数
                methodsN: function(){
                    console.log("计算了methods")
                    //this.methodsName 可以通过函数给vm对象添加methodsName属性
                    this.methodsName = this.firstName + this.lastName;
                }
            },
            computed: {
                computedName: function(){
                    console.log("计算了computed")
                    return this.firstName + ' ' + this.lastName //computedName属性也添加到vm对象上
                }
            },
            watch: {
                //watch：监听的是属性firstName的变化，即watch中的函数名 === data中的属性名
                firstName: function(){
                    console.log("firstName改变时才会触发，页面刷新不触发")
                }
            }
        })
    </script>
//结果：页面刷新的时候触发了methods中的methodsN 和 computed中的computedName，而watch中的firstName没有触发
//原因：（1）methodsN在标签中执行，每次页面刷新都会执行，每次渲染页面都会触发，哪怕是上述例子中age值的改变，也会重排渲染页面，触发methodsN函数
//（2）computedName在页面刷新的时候触发，因为Vue实例vm中本来没有computedName属性，也就是该值为undefined，当页面刷新的时候，该值改变，就会触computedName函数；而age值的改变不会触发computedName，因为有缓存，只有当computedName值发生改变时，才会触发该函数。
//（3）firstName函数没有触发，因为该值没有改变。