Vue--Computed计算属性

Computed属性介绍

computed属性在Vue的使用过程中，频率也是比较高的。computed从本质上来讲并不是一个方法，而是一个属性。

---

基本用法

1.获取一个外国友人的全名并打印到页面中

这是我们可以通过mustache语法（也就是双大括号语法） 来直接打印输出，效果如下表示

{{firstName + ' ' + 'lastName'}}

也可以这样表示:

{{getFullName()}}

methods:{

    getFullName(){

        return this.firstName + ' ' + this.lastName

    }

}
这样表示无可厚非，但是从性能方面来讲，不如computed更加有效率

原因：computed计算属性它本身是具有缓存效果的，只要数据不发生改变，它是不会被重复地被调用。

使用如下:

{{fullName}}

computed:{

    fullName(){

        return this.firstName + ' ' + this.lastName

    }

}

建议：computed属性在使用时，最好是以名词的形式进行命名。例如：fullName

---

计算属性的getter和setter

计算属性computed一般是只有getter方法的，但一般我们只用他的getter方法，并且getter方法是只读属性。使用如下：

computed:{

    fullName:{

        getter(){

            return this.firstName + ' ' + this.lastName

        }

    }

}

上述代码可以直接省略成我们熟悉的写法：

computed:{

    fullName(){

            return this.firstName + ' ' + this.lastName

        }

}

当然setter也可以使用，只不过它是只读属性

computed:{

    fullName:{

        getter(){

                return this.firstName + ' ' + this.lastName

        },

         setter(newValue){

               console.log(newValue)

         }

    }

}