定义：Vue通过操作vm已有属性值，将计算得到的结果赋值给一个全新属性，这个属性就称为计算属性。
原理：底层借助Object.defineProperty()提供的getter和setter来实现。
方式：通过vm的computed属性进行定义。
优势：与methods方式相比，内部有缓存机制，效率更高。
注意：
- 计算属性的getter和setter调用时机
- 第一次读取时
- 当其依赖的属性发生变化时
- 计算属性最终会绑定在vm之上
- 如果计算属性需要提供修改功能，那么必须给它添加setter，且在set()中要同步修改所依赖的属性
- 当计算属性不需要修改时，可以不写setter，此时可以将其简写为一个函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>计算属性</title>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root">
<div>
姓：<input type="text" v-model="lastName"><br><br>
名：<input type="text" v-model="firstName"><br><br>
<!-- 使用插值语法实现 -->
全名（插值语法）：<input v-model="lastName.slice(0,3) + ' - ' + firstName"><br><br>
<!-- 使用methods方式实现 -->
全名（methods）：<input v-model="getFullName()"/><br><br>
<!-- 使用计算属性方式实现 -->
全名（计算属性）：<input type="text" v-model="fullName"><br><br>
<!-- 使用简写的计算属性方式 -->
全名（计算属性简写方式）：<input type="text" v-model="fullName2"><br><br>
</div>
</div>
<script type="text/javascript">
Vue.config.productionTip = false;//关闭生产提示
// 实例化Vue对象
new Vue({
el: "#root",
data: {
lastName: "张",
firstName: "三"
},
methods: {
getFullName() {
console.log("-----")
return this.lastName.slice(0, 3) + " - " + this.firstName;
}
},
computed: {
// 定义方式
fullName: {
get() {
return this.lastName.slice(0, 3) + " - " + this.firstName;
},
set(name) {
let split = name.split("-");
this.lastName = split[0].trim();
this.firstName = split[1].trim();
}
},
// 简写方式，当没有setter时可以这么写
fullName2() {
return this.lastName.slice(0, 3) + " - " + this.firstName;
}
}
})
</script>
</body>
</html>