vue-慕课-计算属性，方法和监听

前言

当data中的数据相互调用的时候，可以用这个。很实用。

计算属性

在data中添加computed属性，里面写方法，方法一定要有返回值。

 computed:{

            
            fullName: function(){
                console.log("计算属性计算了一次")
                return this.firstName+" "+this.lastName;
            }
        },

方法

不多解释，要注意差值表达式中函数方法要加括号。

 // 方法
        methods:{
            fullName1:function(){
                console.log("方法属性计算了一次")
                return this.firstName+" "+this.lastName;
            }

        },

监听

1. 首先在data中定义一个属性，例如fullName2=“”hello world“”
2. 在vue实例中新增一个watch属性，监听firstName和lastName是否发生变化。

   // 监听
        watch:{
            firstName:function(){
                console.log("监听属性计算了一次")
                // return this.firstName+" "+this.lastName;
                this.fullName2 = this.firstName+" "+this.lastName
            },

            lastName:function(){
                console.log("监听属性计算了一次")
                this.fullName2 = this.firstName+" "+this.lastName

            }

        }

对比

三者都能实现，计算属性和监听都有缓存机制，只有当所需的数据发生变化时才执行。计算属性最好，监听太复杂。