简述Vue 的 computed 的实现原理？

八股文_Vue面试题 0 82

参考回答

Vue 的 computed 是计算属性，它会基于它的依赖进行缓存。只有当依赖的数据发生变化时，计算属性才会重新计算。计算属性本质上是基于 getter 和 setter 实现的，Vue 会在初始化时收集依赖，之后通过 getter 获取结果，避免不必要的重复计算。

详细讲解与拓展

缓存机制：
computed 属性的核心特性之一是缓存。当你访问 computed 属性时，Vue 会检查它依赖的响应式数据。如果数据没有变化，Vue 会直接返回之前计算好的结果，而不是每次都重新计算。这种机制提升了性能，避免了不必要的计算。

举个例子，假设有一个计算属性 fullName，它依赖于 firstName 和 lastName：
```
computed: {
 fullName() {
   return this.firstName + ' ' + this.lastName;
 }
}
```
只有在 firstName 或 lastName 改变时，fullName 才会重新计算。如果没有变化，访问 fullName 时会直接返回缓存的结果。
依赖收集：
Vue 会在 computed 属性的 getter 中自动收集所依赖的数据。当计算属性第一次被访问时，Vue 会记录访问的响应式数据（例如 this.firstName 和 this.lastName），并将它们作为依赖添加到计算属性的依赖列表中。
懒加载计算：
计算属性是懒加载的，也就是说，只有在需要的时候（例如模板中使用了它，或者代码中访问它）才会进行计算。如果没有用到该计算属性，Vue 不会计算它。
getter 和 setter：
计算属性不仅可以通过 getter 获取值，还可以通过 setter 设置值。通常，计算属性用于获取基于其他数据的值，但如果需要，也可以设置值来改变其他响应式数据。例如：
```
computed: {
 // getter
 fullName() {
   return this.firstName + ' ' + this.lastName;
 },
 // setter
 setFullName(value) {
   const names = value.split(' ');
   this.firstName = names[0];
   this.lastName = names[1];
 }
}
```
通过 fullName 来访问和修改 firstName 和 lastName。
与 methods 的对比：
虽然 computed 和 methods 都可以用来处理数据，但两者有显著不同：
- computed 会根据依赖的变化进行缓存，只有在依赖的数据发生变化时才会重新计算。
- methods 则每次调用都会执行函数，即使依赖的数据没有发生变化。
举个例子：
```
methods: {
 getFullName() {
   return this.firstName + ' ' + this.lastName;
 }
}
```
每次调用 getFullName()，都会重新计算并返回结果，而 computed 则只有在 firstName 或 lastName 变化时才重新计算。

总结：computed 属性通过缓存机制和依赖收集来优化性能，避免不必要的重复计算，适用于基于响应式数据的计算。如果需要访问和修改数据，可以利用 getter 和 setter。

参考回答

详细讲解与拓展

发表评论 取消回复

发表评论取消回复