vue学习笔记21-25（计算属性）

vue中的计算属性（computed）

1、什么是计算属性

注：计算属性的命名规范，它首先是一个属性，所以最好按照一个属性来进行命名，使用名词进行命名，不要加入动词。

再注：在mustache语法中不要加上小括号，因为这是属性而不是函数，例子：

<h2>{{fullName}}</h2>

2、作用

对要是用的数据首先进行一定的处理，方便使用，简化上方mustache中的内容，增强可读性。

3、使用举例

①简单使用（只读属性）

简单实用只使用了其中的getter用法，省略setter用法并进行简写,直接写上一个函数（和methods里面一样）

例子：

conputed{
  totalPrice, function(){
    let result = 0
    for (let item of this.books){
      result += item.price
    }
    return result
  }
},
           

②完整使用（可读写属性）

将getter和setter完整实现，getter通过计算获得想要获得的属性值，setter多对原始数据(也就是data中的数据)进行修改

computed: {
  fullName: {
    // 进行修改的时候只需要app.fullName = 'hello VueJs'即可（app是new vue的名字）
    set: function (newValue) {
      const names = newValue.split(' ');
      this.firstName = names[0];
      this.lastName = names[1];
    },
    get: function () {
      return this.firstName + ' ' + this.lastName;
    },
  }
},
           

4、与methods相比，为什么使用computed：

computed 是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。而使用 methods ，在重新渲染的时候，函数总会重新调用执行。 也就是说使用computed的性能会优于methods。

所以在简单地把数据进行计算在进行展示的时候，最好多使用computed计算属性，少使用methods，这样能提高系统的效率。