前言

⭐️ 本专栏主要内容为「 Vue3官方文档 」的学习过程 ✍🏼

⭐️ 本专栏适合人群：Vue小白、学完一遍Vue的掘友 👨🏼‍💻

⭐️ 本专栏的阅读顺序和官方文档顺序相同 📖

⭐️ 英雄不问出处，这个专栏一定让你收获满满 🥳！

⭐️ 静心，思考，实操，坚持，巩固，满载而归 🥰！

⭐️ 欢迎各位掘友在评论区交流 🤡

本节内容

• computed
• watch

第六章 计算属性和侦听器

第一节 计算属性 computed

computed解决了模板内表达式逻辑过多导致模板过重难以维护的状况。

<div class="computed">
  <span>has fruits: {{ getFruits }}</span>
</div>

<script>
  const inter = {
    data() {
      return {
        fruits: ['apple','banana','orange']
      };
    },
    computed: {
      getFruits() {
        return this.fruits.length > 0 ? 'yes' : 'no'
      }
    }
  };
  Vue.createApp(inter).mount(".computed");
</script>

效果：has fruits: yes

声明的计算属性getFruits和fruits联动，当fruits更新，getFruits也会更新。

计算属性缓存 vs 方法

在方法中定义一个和计算属性相同的函数，从最终结果来说，这两种实现方式完全相同，并且效果也完全一样。

不同的是计算属性将基于他们的响应依赖关系缓存，计算属性只会在相关响应式依赖发生改变时重新求值。这意味着computed关联的数据没有发生变化，多次访问 对应的computed时会立即返回之前的计算结果，而不必再次执行函数。在方法声明则不同，每次触发重新渲染时，都会导致方法重新执行。

在写计算属性时，return中最好包含组件实例中的响应式数据，否则计算属性将永远不会更新

为什么需要缓存？假设我们有一个性能开销比较大的计算属性 list，它需要遍历一个巨大的数组并做大量的计算。然后我们可能有其他的计算属性依赖于 list。如果没有缓存，我们将不可避免的多次执行 list 的 getter！如果你不希望有缓存，请用 method 来替代。

计算属性的setter

计算属性默认只有getter

computed: {
  fullName: {
    // getter
    get() {
      return this.firstName + ' ' + this.lastName
    },
    // setter
    set(newValue) {
      const names = newValue.split(' ')
      this.firstName = names[0]
      this.lastName = names[names.length - 1]
    }
  }
}

现在再运行 vm.fullName = 'John Doe' 时，setter 会被调用，vm.firstName 和 vm.lastName 也会相应地被更新。

第二节 侦听器

当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。

使用 watch 选项允许我们执行异步操作 (访问一个 API)，并设置一个执行该操作的条件。这些都是计算属性无法做到的。

除了 watch 选项之外，你还可以使用命令式的 vm.$watch API。

什么时候用watch？ 什么时候用computed？

当你要做的操作存在异步的时候用watch

当某个属性和多个响应式属性关联求对应值时，用computed

结语

专栏同步代码：Github ⎋

掘金社区：跟我一起学Vue3

作者简介：

一个满脑子奇怪知识的小商同学，在校ing，懂点设计，懂点排版，为成为一名优秀的前端工程师而努力。