【vue.js】文档解读【day 2】

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

news2025/1/22 16:05:03

在这里插入图片描述

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

文章目录

计算属性
- 计算属性 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: {
    // 一个计算属性的 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>