共计 806 个字符，预计需要花费 3 分钟才能阅读完成。
计算属性定义：当其依赖的属性的值发生变化时，这个属性的值会自动更新；同时，与其相关的 DOM 也会同步更新。
运用范围：模板内的表达式一般都是比较简单的，这是 vue 设计模板的初衷；如果在模板中放入过多复杂的逻辑，会让模板过重切难以维护。此时，需要使用计算属性。(处理复杂逻辑，基于依赖缓存，当依赖发生改变时会重新取值)
简单的 Demo，实现 setter 和 getter 的使用，如下：HTML 部分如下：
<template>
<div>
<div>First Name:
<el-input v-model=”firstName” placeholder=” 请输入内容 ”></el-input>
</div>
<div>Second Name:
<el-input v-model=”secondName” placeholder=” 请输入内容 ”></el-input>
</div>
<div>Full Name:
<el-input v-model=”fullName” placeholder=” 请输入内容 ”></el-input>
</div>
</div>
</template>
JS 部分如下：
export default{
data () {
return {
firstName: ”,
secondName: ”
}
},
components: {},
computed: {
fullName: {
get: function () {
return this.firstName + ‘ ‘ + this.secondName
},
set: function (newVal) {
let names = newVal.split(‘ ‘)
this.firstName = names[0]
this.secondName = names[1]
}
}
}
}
实现的效果：firstName、secondName 发生变化，fullName 会自动更新；反过来，fullName 的改变，firstName 和 secondName 也会自动更新。
