如果阅读有疑问的话,欢迎评论或私信!!
本人会很热心的阐述自己的想法!谢谢!!!
计算属性
我们已经学习了怎么定义数据
,怎么定义方法
。那么当我们需要对数据进行加工处理时,我们第一时间可能会想到使用方法对数据进行加工。但是vue却提供了一个叫做计算属性的对象
,vue为什么推荐使用计算属性呢?
计算属性对比方法有什么好处吗?
计算属性 vs 方法
我们首先来看一个vue官方文档的例子:
export default {
data() {
return {
author: {
name: 'John Doe',
books: [
'Vue 2 - Advanced Guide',
'Vue 3 - Basic Guide',
'Vue 4 - The Mystery'
]
}
}
},
computed: {
// 一个计算属性的 getter
publishedBooksMessage() {
// `this` 指向当前组件实例
return this.author.books.length > 0 ? 'Yes' : 'No'
}
}
}
publishedBooksMessage可以看作是一个被响应式包装的数据,如果更改author对象中的数据,那么publishedBooksMessage属性也会同样被修改。这一点就是计算属性和方法的不同之处,同时计算属性还会被缓存。如果你不想要一个响应式且被缓存的数据,那你就可以使用方法,具体怎么做看自己需要。
计算属性中的数据只有被依赖的那个响应式属性(author.books)
改变了才会重新计算,而不是
所在对象(author)
。
在vue官方文档中有下面这个例子:
computed: {
now() {
return Date.now()
}
}
用户可能想要根据Date.now() 变化的同时更新now属性,但是忘记了Date.now不是响应式数据
。
可计算属性
我们可能有时候想要像更改data中数据那样更改计算属性,但是vue提供给我们的计算属性是只读属性的数据。那么我们要如何才能修改呢?
我们可以通过定义一个包含getter和setter方法的对象来创建一个可写计算属性。例如:
<template>
<p @click="publishedBooksMessage = ['123']">{{ publishedBooksMessage }}</p>
</template>
<script>
export default {
data() {
var author = {
name: "John Doe",
books: [
"Vue 2 - Advanced Guide",
"Vue 3 - Basic Guide",
"Vue 4 - The Mystery",
],
};
return {
author,
};
},
computed: {
publishedBooksMessage: {
get(){
console.log(this.author)
return this.author.books.length //3 -> 1
},
set(newValue){
this.author.books = newValue
}
},
}
};
</script>
Getter不应有副作用
在我们创建的可写计算属性中,我们一定不可以在getter中编写可以修改其他DOM的代码,最重要的一句话就是不要改变其他任何东西的状态!getter的职责本就是用来获取一个属性值并暴露出去。
避免直接修改计算属性值
在上述可写计算属性的列子中,其实不应该直接将books值修改为一个新的数组,因为那样我们还不如直接修改books中的length来的更快。我们更多的是要对books中的值进行修改,比如使用push方法或者pop方法修改,来重新计算books.length。