Vue3 Composition API 之 computed 实现原理

2023-10-15 15:40:16

前言

在 Vue3 中，Composition API 是一种新的 API，它允许你以一种更具模块化和可重用的方式编写 Vue 组件。Composition API 中提供了几个有用的 API，其中 computed 就是其中之一。computed 可以让你定义计算属性，这些属性的值会根据其他属性的值进行计算。当这些属性的值发生变化时，computed 属性的值也会随之变化。

computed 的实现原理

computed 属性的实现原理与 Vue2 中的 watch API 非常相似。当 computed 属性被创建时，Vue 会自动收集该属性所依赖的其他属性。当这些属性的值发生变化时，Vue 会触发 computed 属性的重新计算。

依赖收集

Vue 使用了一个名为 "依赖收集" 的过程来跟踪 computed 属性所依赖的其他属性。当 computed 属性被创建时，Vue 会遍历该属性的 getter 函数，并收集所有被访问的属性。这些属性被称为 computed 属性的依赖属性。

触发更新

当 computed 属性的依赖属性的值发生变化时，Vue 会触发 computed 属性的重新计算。重新计算的过程如下：

Vue 会调用 computed 属性的 getter 函数，并计算该属性的新值。
Vue 会将 computed 属性的新值与旧值进行比较。
如果 computed 属性的新值与旧值不同，Vue 会更新该属性的值，并触发组件的重新渲染。

如何在 Vue3 中使用 computed

在 Vue3 中，你可以使用 computed() 方法来定义 computed 属性。computed() 方法接受一个 getter 函数作为参数。getter 函数是一个函数，它会返回 computed 属性的值。

const vm = Vue.createApp({
  computed: {
    fullName() {
      return `${this.firstName} ${this.lastName}`;
    },
  },
});

在上面的例子中，我们定义了一个名为 fullName 的 computed 属性。fullName 属性的值是 firstName 属性和 lastName 属性的连接。当 firstName 或 lastName 属性的值发生变化时，fullName 属性的值也会随之变化。

总结

computed 属性是一个非常有用的 API，它可以让你定义计算属性，这些属性的值会根据其他属性的值进行计算。当这些属性的值发生变化时，computed 属性的值也会随之变化。computed 属性的实现原理与 Vue2 中的 watch API 非常相似。在 Vue3 中，你可以使用 computed() 方法来定义 computed 属性。