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
})
}
}
}本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！
