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

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，这样能提高系统的效率。