【vue.js】文档解读【day 2】 | 计算属性-编程知识

【vue.js】文档解读【day 2】 | 计算属性

在这里插入图片描述

如果阅读有疑问的话，欢迎评论或私信！！
本人会很热心的阐述自己的想法！谢谢！！！

文章目录

计算属性
- 计算属性 vs 方法
- 可计算属性
- Getter不应有副作用
- 避免直接修改计算属性值

计算属性

我们已经学习了怎么定义数据，怎么定义方法。那么当我们需要对数据进行加工处理时，我们第一时间可能会想到使用方法对数据进行加工。但是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: {// 一个计算属性的 getterpublishedBooksMessage() {// `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>