Vue computed使用总结
总结如下
基础用法：
1.计算属性的getter函数
2.计算属性的setter函数
3.计算属性的cache缓存属性
常见问题：
1.计算属性getter不执行的场景
2.在v-for中使用计算属性，起到类似"过滤器的作用"
3.watch与computed的set函数的比较
computed 计算属性
定义：当其依赖的属性的值发生变化的时，计算属性会重新计算。反之则使用缓存中的属性值。一个完整的计算属性如下：
computed: {
example: {
get () {
return 'example'
},
set (newValue) {
console.log(newValue)
}
}基础用法
1.计算属性的getter函数
当其依赖的属性的值发生变化的时，这个计算属性的值也会自动更新。多用于"data，computed"的属性。
<template>
<div>
<h4>测试</h4>
<div>
<input type="text" v-model="message" />
<div>{{changeMessage}}</div>
</div>
</div>
</template>
export default {
data () {
return {
message: 'hello'
}
},
computed: {
changeMessage: {
// 计算属性：依赖message变化而变化 依赖没变化就不会重新渲染；
get () {
return this.message + 'world'
},
set () {
}
}
}
}
2.计算属性的setter函数
当赋值给计算属性的时候，将调用setter函数。多用于在模板组件中需要修改计算属性自身的值的时候。
<template>
<div>
<h4>测试</h4>
<div>
{{didi}}
{{family}}
</div>
<div>
{{didiFamily}}
</div>
</div>
</template>
export default {
data () {
return {
didi: 'didi',
family: 'family'
}
},
computed: {
didiFamily:{
//getter
get:function(){
return this.didi + ' ' + this.family
},
//setter
set:function(newValue){
// 这里由于该计算属性被赋值，将被调用
console.log(newValue)
this.didi = 123
this.family = 456
}
}
},
mounted () {
// 赋值，调用setter函数
this.didiFamily = 'John Doe'
}
}
3.计算属性的缓存
<template>
<div>
<h4>测试</h4>
<div>
<input type="text" v-model="message" />
<div>{{now}}</div>
</div>
</div>
</template>
export default {
data () {
return {
message: 'hello'
}
},
computed: {
now:{
cache: false,
get:function(){
return Date.now() + this.message
}
}
},
mounted () {
setInterval(() => {
// 当缓存开关为false的时候，定时器每次打印的时间都是不一样的
console.log(this.now)
}, 500)
}
}常见问题
1.计算属性getter不执行的场景
当包含计算属性的节点被移除并且模板中其他地方没有再引用该属性的时候，那么对应的计算属性的getter函数方法不会执行，代码实例如下：
<template>
<div>
<h4>测试</h4>
<div>
<button @click="toggleShow">Toggle Show Total Price</button>
<p v-if="showTotal">Total Price = {{totalPrice}}</p>
</div>
</div>
</template>
export default {
data () {
return {
showTotal: true,
basePrice: 100
}
},
computed: {
totalPrice () {
return this.basePrice + 1
}
},
methods: {
toggleShow () {
this.showTotal = !this.showTotal
}
}
}
2.在v-for中使用计算属性，起到类似”过滤器的作用”
<template>
<div>
<h4>测试</h4>
<div>
<ul>
<li v-for="n in evenNumbers">{{n}}</li>
</ul>
</div>
</div>
</template>
export default {
data () {
return {
numbers: [ 1, 2, 3, 4, 5 ]
}
},
computed: {
evenNumbers () {
return this.numbers.filter(function (number) {
return number % 2 === 0
})
}
}
}本文内容仅供个人学习/研究/参考使用，不构成任何决策建议或专业指导。分享/转载时请标明原文来源，同时请勿将内容用于商业售卖、虚假宣传等非学习用途哦～感谢您的理解与支持！
