简介定义
要用的属性不存在，要通过已有属性计算出来时，可以使用计算属性。
原理也是使用Object.defineProperty函数来进行set和get方法的定义。
get方法被更新，也就是计算属性被获取的场景有两个，第一个是属性初次使用时，第二个是计算属性依赖的熟悉发生变化时。
使用，计算属性在vue的配置对象中，使用computed属性进行定义。
与methods相比，计算属性内部有缓存机制，效率更高。
计算属性最终会出现在vm中，直接读取即可。
如果计算属性要被修改，那么必须在配置该计算属性时使用完整写法，被配置set方法进行响应，否则会报错。
下面是完整写法：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>计算属性</title>
</head>
<body>
<div id="root">
<div>通过方法获取的全名{{getFullName()}}</div>
<div>通过方法获取的全名{{getFullName()}}</div>
<div>通过计算属性获取的全名{{fullName}}</div>
<div>通过计算属性获取的全名{{fullName}}</div>
</div>
<script src="./js/vue.js"></script>
<script>
Vue.config.productionTip = false
const vm = new Vue({
el:"#root",
data:{
firstName:"Ye",
lastName:"Haocong"
},
methods: {
getFullName(){
console.log("调用了getFullName获取全名");
return this.firstName + "-" + this.lastName;
}
},
computed:{
//完整写法会被定义为一个对象
fullName:{
get(){
console.log("获取计算属性fullName");
return this.firstName + "-" +this.lastName;
},
//参数是新值，这个是set方法，当计算属性fullName被修改时，会被调用。
set(newValue){
console.log("计算属性的set方法被调用",newValue);
//将全名拆开分别设置到firstName和lastName中
let value = newValue.split("-");
this.firstName = value[0];
this.lastName = value[1];
}
}
}
})
</script>
</body>
</html>
结果：
下面是简便写法：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>计算属性</title>
</head>
<body>
<div id="root">
<div>通过方法获取的全名{{getFullName()}}</div>
<div>通过方法获取的全名{{getFullName()}}</div>
<div>通过计算属性获取的全名{{fullName}}</div>
<div>通过计算属性获取的全名{{fullName}}</div>
</div>
<script src="./js/vue.js"></script>
<script>
Vue.config.productionTip = false
const vm = new Vue({
el:"#root",
data:{
firstName:"Ye",
lastName:"Haocong"
},
methods: {
getFullName(){
console.log("调用了getFullName获取全名");
return this.firstName + "-" + this.lastName;
}
},
computed:{
//这个是简便写法，当计算属性只涉及获取，不涉及设置时，可以使用该种模式，实际上就是忽略set，只要get
//实际开发中这种模式也是用的比较多。
fullName(){
console.log("获取计算属性fullName");
return this.firstName + "-" +this.lastName;
}
}
})
</script>
</body>
</html>
结果：
控制台：
说明，代码中通过方法获取了两次全名和通过计算属性获取了两次全名，但是控制台中只打印了一次“获取计算属性fullname”，说明计算属性只被调用了一次，使用了缓存，而方法被调用了两次。
上面是计算属性第一次调用的时机，第一次初始化时会被调用，而第二个时机是依赖的属性被改变，比如firstName或者lastName属性被改变，都会重新触发计算属性的获取重新渲染页面。