利用例子引入计算属性
<body>
<div id = "demo">
初始字符串：{{ text }}<br/>
用,将字符串分割成数组：{{text.split(',')}}<br/>
将数组进行反转：{{text.split(',').reverse()}}<br/>
用，将反转的数组变成字符串：{{text.split(',').reverse().join(',')}}<br/>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
//需求：将123，456，789变成789,456,123
var app = new Vue({
el: '#demo',
data:{
text: '123,456,789'
}
})
</script>
</body>
以上代码缺点：逻辑过程就会变得臃肿，难以维护，所以遇到复杂的逻辑时，应当使用计算属性。
定义计算属性
所有的计算属性都以函数的形式写在 Vue 实例内的computed 选项内，最终返回计算后的结果。与data平级，可以同时声明很多个计算属性。
计算属性依赖于Vue实例中的其他属性。可以写单行多行各种实例，但是要先使用this获取数据。
通过使用计算属性得到的：{{ reverseText }}
//计算属性的定义
computed: {
reverseText:function(){
return this.text.split(',').reverse().join(',');
}
}
此处的结果和上面的一致
计算属性的用法
在一个计算属性里可以完成各种复杂的逻辑，包括运算、函数调用等，只要最终返回一个结果就可以。除了上例简单的用法，计算属性还可以依赖多个 Vue 实例的数据，只要其中任一数据变化，计算属性就会重新执行，视图也会更新。
<body>
<div id = "demo">
两个购物车的总价：{{prices}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
//计算购物车的所有物品的价格
var app2 = new Vue({
el: '#abx',
data: {
msg: '我是APP2中的内容'
}
});
var app1 = new Vue({
el: "#demo",
data: {
//第一个购物车
package1: [
{
name: 'iphone',price: 6999,count:2
},
{
name: 'ipad', price: 3600,count:1
}
],
//第二个购物车,数组中包含两个对象
package2: [
{
name: 'iphone8',price: 6566,count:3
},
{
name: 'ipad', price: 3600,count:6
}
]
},
computed: {
prices: function(){
var prices = 0
for(var i = 0; i < this.package1.length; i++){
prices += this.package1[i].price * this.package1[i].count;
}
for(var j = 0; j < this.package2.length; j++){
prices += this.package2[j].price * this.package2[j].count;
}
//此处实现了依赖VUE实例的多个属性,依赖了app2和app1
return prices + '---------------'+ app2.msg;
}
}
})
</script>
</body>
结果截图：
image.png
getter和setter
- 如果计算属性直接跟一个function，默认的就是getter函数。如果不指定getter还是setter,默认就是getter。
computed: {
//使用的是计算属性的默认用法getter函数
/*
fullName: function(){
return this.firstName + ' ' + this.lastName
}*/
//不指定getter和setter，默认执行getter函数。所以下面的和上面的额效果是一样的。
fullName:{
get: function(){
return this.firstName + ' ' + this.lastName
}
}
}
- set方法：给计算属性设置值
//设置全程名字，要调用set方法
fullName:{
//set设置值
set:function(newValue){
//用欧豪分隔 liu ,bei
console.log('我是set方法，我被调用了');
var names = newValue.split(',');//分割成数组
this.firstName = names[0];
this.lastName = names[1];
}
}
在浏览器的控制台中调用set方法
image.png
计算属性可以依赖其他计算属性，计算属性不仅可以依赖当前 Vue 实例的数据，还可以依赖其他实例的数据
计算属性的缓存
-
调用 methods 里的方法也可以与计算属性起到同样的作用
-
页面中的方法： 如果是调用方法，只要页面重新渲染。方法就会重新执行，不需要渲染，则不需要重新执行
-
计算属性：不管渲染不渲染，只要计算属性依赖的数据未发生变化，就永远不变
-
两者调用的区别{{方法()}},{{计算属性}}
结论：没有使用计算属性，在 methods 里定义了一个方法实现了相同的效果，甚至该方法还可以接受参数，使用起来更灵活。既然使用 methods 就可以实现，那么为什么还需要计算属性呢？原因就是计算属性是基于它的依赖缓存的。 一个计算属性所依赖的数据发生变化时，它才会重新取值，所以text 只要不改变，计算属性也就不更新
何时使用: 使用计算属性还是 methods 取决于你是否需要缓存，当遍历大数组和做大量计算时，应当使用计算属性，除非你不希望得到缓存。
网友评论