计算属性

计算属性是基于已有的数据进行动态计算得出的结果。在 Vue 组件的 computed 选项中，你可以定义一个或多个计算属性。每个计算属性都是一个函数，该函数返回一个值，这个值就是这个计算属性的值。

---

下面是计算属性示例：

<template>  
  <div>  
    姓：<input v-model="surname"><br>  
    名：<input v-model="name">  <br>
    全名：{{ fullName }}  <br>
    <button @click="updateFullName('李-四')">更新全名</button>  
  </div>  
</template>  
  
<script>  
export default {  
  data() {  
    return {  
      surname: '张',  
      name: '三'  
    }  
  },  
  computed: {  
    fullName: {  
      get() {  
        return this.surname + '-' + this.name;  
      },  
      set(value) {  
        const arr = value.split('-');  
        this.surname = arr[0];  
        this.name = arr[1];  
      }  
    }  
  },  
  methods: {  
    updateFullName(fullName) {  
      this.fullName = fullName; // 这会触发set函数  
    }  
  }  
}  
</script>

结果展示：

简写：

computed: {
    //无 set 情况的简写形式
    fullName(){  
        return this.surname + '-' + this.name;   
    }    
}  

总结：

• 计算属性底层借助了 Object.defineProperty 方法提供的 getter 和 setter。计算属性中 get 函数初次读取时会调用一次，当依赖的数据发生改变时会被再次调用，与 methods 实现比较，computed 内部有缓存机制，效率更高。

---