3-2 vue生命周期及实例的属性和方法-计算属性
目录：
- 基本用法
- 为什么要用计算属性(2个特点)
- 计算属性 vs 方法
- get和set方法
一、基本用法
计算属性也是用来存储数据，但是有一下两个特点：
- 数据可以进行逻辑处理操作
- 对计算属性中的数据进行监视
计算属性使用，官方也给出了详细的参考文档：计算属性官方手册
计算属性必须是一个函数，通过函数的方式返回，语法如下：
<body>
<div id="box">
<!--普通属性调用-->
<h2>{{msg}}</h2>
<!--计算属性引用跟普通属性是一样的-->
<h2>{{msg2}}</h2>
</div>
<script type="text/javascript" src="../vue.js"></script>
<script>
let vm = new Vue({
el: "#box",
data:{ //普通属性
msg: "高哥哥帅的一塌糊涂"
},
computed:{//计算属性
msg2:function(){ //该函数必须有返回值，用来获取属性，称为get函数，这边不建议使用箭头函数(=>{})
return "欢迎来到高哥哥的博客园...."
}
}
})
</script>
</body>
二、为什么要用计算属性(2个特点)
2.1、数据可以进行逻辑处理操作
我们在绑定数据的时候，对于数据的处理再显示，可以有很多种方法，但是为什么要用计算属性的方式呐，而不是用表达式或者是函数的方式进行处理呐。
接下来我们先看看，用表达式的方式对于数据的处理跟用计算属性的方式有什么不一样。如下：
<body>
<div id="box">
<!--表达式方式:对数据的处理再显示-->
<h2>{{msg.split(" ").reverse().join(" ")}}</h2>
<!--计算属性方式-->
<h2>{{reverseMsg}}</h2>
</div>
<script type="text/javascript" src="../vue.js"></script>
<script>
let vm = new Vue({
el: "#box",
data:{
msg: "gao gege is very handsome"
},
computed:{//计算属性
reverseMsg:function(){//该函数必须有返回值，用来获取属性，称为get函数
return this.msg.split(" ").reverse().join(" ");
}
}
})
</script>
</body>
输出结果：
handsome very is gege gao
handsome very is gege gao
虽然输出结果都是一样的，你不觉得，用表达式的方式不是很繁琐嘛，而且逻辑不清晰，不好处理和维护，所以我们能用计算属性的，就不要用表达式的方式去对数据的处理，所以提取如下代码：
<!--表达式方式:对数据的处理再显示，弃用-->
<h2>{{msg.split(" ").reverse().join(" ")}}</h2>
<!--计算属性方式，建议使用-->
<h2>{{reverseMsg}}</h2>
computed:{//计算属性，computed是vm实例的一个选项
reverseMsg:function(){
//可以包含逻辑处理操作，同时reverseMsg是依赖于msg的
return this.msg.split(" ").reverse().join(" ");
}
}
2.2、对计算属性中的数据进行监视
在计算属性中，会自动监视数据的变化，如果发现msg发生改变时，那么reverseMsg也会跟着变，因为reverseMsg计算属性是根据msg属性计算得来的，换句话说，reverseMsg是依赖msg的。练习代码如下：
<body>
<div id="box">
<!--计算属性方式-->
<h2>{{reverseMsg}}</h2>
<!--更改msg值-->
<button @click="change">修改msg值</button>
</div>
<script type="text/javascript" src="../vue.js"></script>
<script>
let vm = new Vue({
el: "#box",
data:{
msg: "gao gege is very handsome"
},
computed:{//计算属性
//reverseMsg是依赖msg的，发现msg发生改变时，reverseMsg也会跟着变，做到了计算属性中的数据进行监视
reverseMsg:function(){
return this.msg.split(" ").reverse().join(" ");
}
},
methods:{
change(){
this.msg = "We love you,teacher gao!!!"
}
}
})
</script>
</body>
展示页面，点击 "修改msg值"的button按钮时输出如下：
//点击button按钮前 handsome very is gege gao button按钮(修改msg值) //点击button按钮后 gao!!! you,teacher love We button按钮(修改msg值)
三、计算属性 vs 方法
对数据的处理，可以将计算属性的get函数定义为一个方法，也可以实现类似的功能。
区别：
- 计算属性(computed)是基于它的依赖进行更新的，只有在相关依赖发生改变时才能更新变化
- 计算属性是缓存的，只要相关依赖没有改变多次访问计算属性得到的值是之前缓存的计算结果，不会多次执行。
上面的例子，我们通过代码，验证了计算属性(computed)是基于它的依赖进行更新的，只有在相关依赖发生改变时才能更新变化(区别一)。接下来，我们验证：计算属性是缓存的，只要相关依赖没有改变多次访问计算属性得到的值是之前缓存的计算结果，不会多次执行(区别二)。例子：
<body>
<div id="box">
<!--计算属性 vs 方法-->
<!--计算属性-->
<!--<h2>{{num2}}</h2>-->
<!--直接调用方法，获取返回值-->
<!--<h2>{{getNum2()}}</h2>-->
<button onclick="fn()">测试计算属性缓存</button>
</div>
<script type="text/javascript" src="../vue.js"></script>
<script>
Vue.config.devtools = false;
Vue.config.productionTip = false;
let vm = new Vue({
el: "#box",
data:{
num1: 7
},
computed:{//计算属性
num2:function(){ //计算属性num2
console.log(new Date());
return this.num1-1;
}
},
methods:{
getNum2(){ //通过方法数据处理获取num2
console.log(new Date());
return this.num1-1;
}
}
});
//在vm实例外创建一个测试事件
function fn(){
setInterval(function(){
console.log(vm.num2); //控制台输出计算属性
//console.log(vm.getNum2()); //控制台输出 方法返回值
},1000) //定时任务，每隔1秒执行1次
}
</script>
</body>
console控制台输出：
//计算属性输出vm.num2 Fri Mar 06 2020 14:13:09 GMT+0800 (中国标准时间) 53 6 //方法输出 vm.getNum2() Fri Mar 06 2020 14:14:58 GMT+0800 (中国标准时间) 6 Fri Mar 06 2020 14:14:59 GMT+0800 (中国标准时间) 6 .....
从上面可以看出，、计算属性时间只输出一次，说明num2的值执行一次，如果执行多次，每一次执行都要输出时间，所以计算属性是我第一次调用的时候执行一次，以后再也不用执行了，直接取缓存的值就可以了。但是通过方法就不行，时间和值每一次都要输出一次。
四、get和set方法
计算属性由两部分组成：get和set，分别用来获取计算属性和设置计算属性。
默认只有get，如果需要set，要自己添加。如果需要用到set方法的话，固定写法如下：
computed:{//计算属性
cptd_name:{ //计算属性名
get:function(){
//get方法
},
set:function() {
//set方法
}
}
},
执行特点： 先执行set() -> 后执行get()方法
一般情况下，如果我们想改 计算属性的值，是不可以直接修改的，如果你想修改的话，必须是通过计算属性中的 set方法，去修改计算属性的值。
<body>
<div id="box">
<button @click="change2">测试set方法</button>
<hr>
<h2>{{num2}}</h2>
</div>
<script type="text/javascript" src="../vue.js"></script>
<script>
let vm = new Vue({
el: "#box",
data:{
num1: 7
},
computed:{//计算属性
num2:{
get:function(){
return this.num1-1;
},
set:function(val) { //形参val接收chang2方法中的this.num2=111 中111的值作为实参
//console.log("修改num2值"); //测试 先执行 set() -> 后执行get()
//this.num2 = 111; //验证不能修改num2的值，不然会导致内存溢出
this.num1 = val; //你所谓的修改不是去改num2的值，你应该只是去修改他的依赖的值，也就是修改num1
}
}
},
methods:{
change2(){
this.num2=111; //这边并不是直接修改计算属性num2的值，而是把新的111的形参的值传给计算属性num2中的 set:function(val)中的形参 val
}
}
});
</script>
</body>
控制台输出：
110
通过上面的实例说明，想要修改 计算属性的值，不能直接修改，需要通过set()方法去修改。在方法中 this.num2=111，并不是修改 计算属性num2的值，而是，把新的值111作为实参传给 计算属性 num2的set()方法中val，但是修改的时候，不是让你去修改 num2的值，你应该只是去修改它依赖的值，也就是去修改num1。
浙公网安备 33010602011771号