Vue计算属性详解
Vue计算属性详解
- 计算属性是用来存储数据的，但具有以下几个特点：
- 数据可以进行逻辑处理操作
- 对计算属性中的数据进行监视
- 计算属性和普通属性的区别：
- 计算属性是基于它的依赖进行更新的，只有在相关依赖发生改变时才能更新变化
- 计算属性是缓存的，只要相关依赖没有改变，多次访问计算属性得到的值是之前缓存的结果，不会每次获取数据都执行
<h2>{{message}}</h2>
<!--这里可以把两个变量写在同一个Mustache语法中-->
<h2>{{firstName +' '+lastName}}</h2>
<h2>{{firstName}} {{lastName}}</h2>
<h2>{{getFullName()}}</h2> //methods展示复杂数据
<h2>{{fullName}}</h2> //计算属性展示复杂数据
computed: {
fullName: function () {
return this.firstName + " " + this.lastName
}
},
methods: {
getFullName: function () {
return this.firstName + ' ' + this.lastName
}
}
注释:message firstName lastName均为Vue实例中data里的数据 均为字符串
这里我们要展示多个数据并且进行一些简单操作时，我们如果使用Mustache语法时，会显得非常臃肿，所以遇到复杂逻辑的时候可以使用Vue中自带的computed或者通过一个method来实现。
- get和set
- 计算属性由两部分组成，get和set，分别用来获取计算属性和设置计算属性.
默认计算属性只有get，如果需要set，要自己手动添加.。
<div id="app">{{fullName}}</div>
data: {
firstName: 'Kobe',
lastName: 'Bryant'
},
computed: {
fullName: {
//默认是不写setter的,在控制台端修改计算属性的值会调用set方法
set (newValue) {//参数newValue为你在控制台端修改后的值 会渲染到dom中
console.log("-------" + newValue);
const names = newValue.split(' ');
this.firstName = names[0];
this.lastName = names[1];
},
get () { //get必须有返回值
return this.firstName + " " + this.lastName
}
}
- 计算属性和methods的区别
这里就是如上面所说，计算属性是有缓存的，在数据不发生变化的情况下，会自动从缓存中取出数据，而methods每一次都会进行重新计算执行。
<div id="app">
<!--methods展示-->
<h2>{{getFullName()}}</h2>
<h2>{{getFullName()}}</h2>
<h2>{{getFullName()}}</h2>
<h2>{{getFullName()}}</h2>
<!--计算属性展示-->
<h2>{{fullName}}</h2>
<h2>{{fullName}}</h2>
<h2>{{fullName}}</h2>
<h2>{{fullName}}</h2>
</div>
const app = new Vue({
el: '#app',
data: {
firstName: 'Kobe',
lastName: 'Bryant'
},
computed:{
fullName:function () {
console.log("fullName");
return this.firstName+ ' ' +this.lastName
}
},
methods:{
getFullName:function () {
console.log("getFullName");
return this.firstName+" "+this.lastName
}
}
})
最后在控制端可以很清楚的看到，getFullName输出了三次，也就是执行了三次，而fullName只输出了一次，由此可以看出计算属性的缓存机制。
