从源码剖析Vue3 computed 的工作原理
2023-10-06 22:10:30
前言
在 Vue.js 中，computed 属性是一个非常有用的特性，它允许我们以一种声明式的方式来定义组件中的计算属性。这些计算属性可以依赖于组件中的其他数据，并在这些数据发生变化时自动更新。这使得我们可以轻松地构建复杂的组件，而无需手动管理状态和数据更新。
在本文中，我们将通过源码剖析的方式，深入浅出地讲解Vue3中computed的工作原理。我们将首先介绍computed的基本概念，然后通过一个示例来演示如何使用computed来简化Vue组件的数据绑定。最后，我们将对computed的源码进行分析，以了解其内部是如何工作的。
computed的基本概念
computed 属性是一个计算属性，它依赖于组件中的其他数据，并在这些数据发生变化时自动更新。computed 属性可以通过两种方式来定义：
- 使用 getter 函数：
export default {
computed: {
fullName() {
return this.firstName + ' ' + this.lastName
}
}
}
- 使用 getter 和 setter 函数：
export default {
computed: {
fullName: {
get() {
return this.firstName + ' ' + this.lastName
},
set(newValue) {
const [firstName, lastName] = newValue.split(' ')
this.firstName = firstName
this.lastName = lastName
}
}
}
}
computed的应用示例
为了更好地理解computed的用法，我们来看一个简单的示例。假设我们有一个组件，它需要显示一个用户的全名。这个全名是通过用户的姓氏和名字拼接而成的。我们可以在组件中使用computed属性来定义fullName属性，如下所示：
export default {
data() {
return {
firstName: 'John',
lastName: 'Doe'
}
},
computed: {
fullName() {
return this.firstName + ' ' + this.lastName
}
}
}
在上面的示例中，我们首先在data()方法中定义了firstName和lastName两个数据属性。然后，我们在computed()方法中定义了fullName属性。fullName属性是一个计算属性，它依赖于firstName和lastName这两个数据属性。当firstName或lastName发生变化时，fullName也会自动更新。
我们在组件的模板中可以使用fullName属性，如下所示：
<template>
<h1>{{ fullName }}</h1>
</template>
当firstName或lastName发生变化时，fullName属性的值也会随之变化，并且组件模板中的内容也会自动更新。
computed的源码分析
computed 属性的实现原理并不复杂，它主要包含以下几个步骤：
- 当一个组件被创建时，Vue.js 会遍历该组件的computed属性，并为每个属性创建一个对应的响应式依赖。
- 当一个响应式依赖发生变化时，Vue.js 会自动执行与该依赖相关联的computed属性的getter函数，并将计算结果缓存起来。
- 当组件需要渲染时，Vue.js 会从缓存中获取computed属性的计算结果，并将其显示在模板中。
如果一个computed属性被定义为具有setter函数，那么当该属性的值发生变化时，Vue.js会自动执行setter函数来更新相关的数据属性。
总结
computed 属性是 Vue.js 中一个非常有用的特性，它允许我们以一种声明式的方式来定义组件中的计算属性。computed 属性可以依赖于组件中的其他数据，并在这些数据发生变化时自动更新。这使得我们可以轻松地构建复杂的组件，而无需手动管理状态和数据更新。
通过本文的学习，我们对computed属性有了更深入的了解，并且能够熟练地将其应用到我们的开发项目中。
