【Vue】关于计算属性 Computed 的理解

---

一、计算属性的基本用法

在使用计算属性之前，需要先了解计算属性的使用场景，根据 “为什么要使用计算属性？” 的思路，来正确认识计算属性的用法和好处

项目场景

页面中有三个 input 标签，前两个分别是 姓 和 名，最后一个需要根据前两个 input 标签的输入计算产生，显示效果如：Kobe Bryant（姓名之间用空格隔开）

<div id="demo">
    姓: <input type="text" placeholder="First Name" v-model="firstName"><br>
    名: <input type="text" placeholder="Last Name" v-model="lastName"><br>
    
    <!--fullName1 是根据 fistName 和 lastName 计算产生-->
    姓名1: <input type="text" placeholder="Full Name1" v-model="fullName1"><br>
  </div>

先给 firstName 和 lastName 设置两个初始值 Kobe 和 Bryant

    const vm = new Vue({
      el: '#demo',
      data: {
        firstName: 'Kobe',
        lastName: 'Bryant'
      }
    })

fullName1 为什么需要用到计算属性呢？因为 fullName1 的属性值需要根据 data 中的 firstName 和 lastName 这两个属性来计算得出，所以，这就是计算属性的应用场景：根据其他 data 属性数据 来计算得出属性值

const vm = new Vue({
      el: '#demo',
      data: {
        firstName: 'Kobe',
        lastName: 'Bryant'
      },
      computed: {
        fullName1(){ // fullName1是计算属性的一个方法，方法的返回值作为属性值
          return this.firstName + ' ' + this.lastName
        }
      }
        
    })

fullName1 是一个回调函数，它在初始化数据和其他 data 属性数据发生改变时自动调用，将返回值 (根据相关的其它属性数据 )作为属性值。这时，如果你改变姓和名的数据，最后的姓名数据也会随之改变。以上是计算属性的基本用法。

二、计算属性中的缓存

缓存的概念

计算属性中的缓存是指，在页面中多次获取计算属性的属性值，如果相关的 data 属性数据没有发生改变，则会调取缓存中的数据，从而提高性能，这也是计算属性和 methods 属性的不同也是优势之处

代码如下（示例）：

  <p>{{fullName1}}</p>
  <p>{{fullName1}}</p>
  <p>{{fullName1}}</p>

仍是上面的例子，不同的是在 p 标签中多次获取 fullName1 的值，那么 fullName1 对应的方法只会在初始化数据时调用一次，之后每次都会获取缓存中的 fullName1 的值

三、计算属性中的 getter 和 setter

实际上，计算属性中的所有属性都有一个 set 方法和一个 get 方法，俗称 setter 和 getter，通常使用计算属性时，都是调用属性的 get 方法。

    const vm = new Vue({
      el: '#demo',
      data: {
        firstName: 'Kobe',
        lastName: 'Bryant'
      },
      computed: {
        fullName1: {
          get(){
            return this.firstName + ' ' + this.lastName
          },

如上面的代码中，fullName1 属性的 get 方法就是用于获取属性值时调用，将返回值 (根据相关的其它属性数据) 作为属性值，但是 set 方法就不太一样了。调用 fullName1 属性的get 方法，fullName1 的值只能根据其依赖的相关数据改变而改变，但是它本身没有 set 方法的话，改变它的值是会报如下错误的。

vue.js:491 [Vue warn]: Computed property "fullName1" was assigned to but it has no setter.

(found in <Anonymous>)

也就是说，如果你没有设置 set 方法，那么不能擅自改变计算属性的属性值。那么，set 方法的用处是什么呢？set 方法可以用于监视当前属性值变化 , 当属性值发生了改变时自动调用，同步更新相关的其它属性值。比如，fullName1 的值改变的时候，可以同步更新 firstName 和 lastName

    computed: {
        fullName1: {
          get(){
            return this.firstName + ' ' + this.lastName
          },
          set(value){ 
            const names = value.split(' ')
            this.firstName = names[0]
            this.lastName = names[1]
          }
        }
      }

set 方法还有一个参数 value，它是 fullName1 改变后的新值，可以在 set 方法中操作该值。

---

总结

计算属性是Vue中一个很好用的配置选项，但是要在充分了解它的应用场景后，才能更好地运用它，以上就是关于计算属性的一些个人思考，如有疏漏，欢迎指正。peace ~~