computed属性的使用
computed顾名思义就是计算属性。vue设计计算属性的本意是希望开发者在html代码中减少js代码,因为混合的代码不容易阅读和维护。通过使用计算属性,可以把原本复杂的代码封装为1个属性,然后调用该属性即可。你可以在数据绑定的时候调用,还可以在vue实例中调用,不过这里需要注意,计算属性中的数据是否响应将会决定该计算属性是否是响应的,并且计算属性会进行缓存,依赖的数据不是响应的,那么计算属性会立刻返回缓存,这是一把双刃剑 。在实际开发中,需不需要使用,还是看情况吧。
[loginview]
利用computed缩短代码
<template>
<div>
<p> {{person.car.name}}</p>
<p> {{carName}}</p>
</div>
</template>
<script>
export default {
data() {
return {
person: {
name: '张珊',
age: 30,
car: {
name: '奥迪A7',
band: '奥迪'
}
}
}
},
computed: {
carName() {
return this.person.car.name
}
}
}
</script>
这段代码中,我们使用了计算属性把person.car.name“重命名”为carName了,达到了缩短代码的目的。一般情况下我们也会对vuex的调用使用计算属性进行简化。如果你还有一些简单的逻辑需要编写在计算属性内也是可以的。
利用计算属性的缓存
现在我们来写一段比较对比下:
<template>
<div>
<p>{{aa}}</p>
<p>{{aa}}</p>
<p>{{bb()}}</p>
<p>{{bb()}}</p>
</div>
</template>
<script>
export default {
data() {
return {
a:'aaaa',
b:'bbbb'
}
},
computed: {
aa(){
console.log('aaa')
return this.a
},
},
methods:{
bb(){
console.log('bbb')
return this.b
}
}
}
</script>
代码中分别使用计算属性和函数的方式来包装a,b属性,同时把调用过程输出到控制台。我们分别来查看页面和控制台的输出:
页面上输出:

控制台输出:

我们发现页面上输出了2次aaaa
,但是控制台却只输出了1次aaa
,印证了计算属性确实会使用缓存,而通过函数的方式调用,每次都会输出bbb
。
计算属性赋值
计算属性默认只能获取数据,不能够直接对它赋值。这是因为计算属性默认只有getter,没有setter。当然想要赋值也比较简单,我们可以人为的添加setter。
代码:
<template>
<div>
<p>{{aa}}</p>
</div>
</template>
<script>
export default {
data() {
return {
a: 'aaaa',
}
},
computed: {
aa: {
get() {
return this.a
},
set(value) {
this.a = value
}
},
},
mounted() {
this.aa = '11'
}
}
</script>
此时我们发现页面并没有输出aaaa
,而是输出了我们赋值的11
,说明成功赋值了。

[/loginview]
本文系作者 @迦娜王 原创发布在 松鼠乐园。未经许可,禁止转载。