计算属性:
1. 定义: 要用的属性不存在，要通过已有属性计算得来。
2. 原理: 底层借助了 Objcet.defineProperty 方法提供的 getter 和 setter 。
3. get 函数什么时候执行?
(1). 初次读取时会执行一次。
(2). 当依赖的数据发生改变时会被再次调用。
4. 优势: 与 methods 实现相比，内部有缓存机制（复用），效率更高，调试方便。
5. 备注:
(1). 计算属性最终会出现在 vm 上，直接读取使用即可。
(2). 如果计算属性要被修改，那必须写 set 函数去响应修改，且 set 中要引起计算时依赖的数据发生改变。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="lib/vue-2.5.9.js"></script>
<title>姓名案例3-computed</title>
</head>
<body>
<div id="root">
姓：<input type="text" v-model="first_name">
<br>
名：<input type="text" v-model="last_name">
<br>
<p>----> {{ full_name }}</p>
<p>----> {{ full_name }}</p>
<p>----> {{ full_name }}</p>
<p>----> {{ full_name }}</p>
</div>
</body>
<script>
let vm = new Vue({
el: "#root",
data: {
first_name: '',
last_name: '',
},
computed: {
full_name: {
// get有什么作用？ 当有人读取fullName时，get就会被调用，且返回值就作为fullName的值
// get什么时候调用？ 1.初次读取fullName时。2.所依赖的数据发生变化时。
get: function () {
console.log('get被调用了')
return this.first_name + '-' + this.last_name
},
set: function (value) {
// 需要输入的全名格式为“姓-名”，暂不对不符合规范的输入进行限制
// set什么时候调用？ full_name被修改时。
const arr = value.split('-')
console.log('arr--->', arr)
this.first_name = arr[0]
this.last_name = arr[1]
}
}
},
methods: {
}
})
</script>
</html>
当计算属性只需要get不需要set时，可以简写：
full_name2: function(){
console.log('get2被调用了')
return this.first_name + '-' + this.last_name
}
使用 chrome 的扩展工具 vue devtool 注意一个问题（小坑）： 如果页面上没用使用到计算属性，但是更新了它的依赖数据，在 devtool 中不会刷新。 标签：arr,Vue,set,computed,get,full,属性,name From： https://www.cnblogs.com/ximu1009/p/17774940.html