vue2核心原理(简易)-computed笔记

前言

在本文中，我们将深入探讨Vue 2的核心原理，特别是computed属性。我们将探讨computed属性的默认行为、如何使用Object.defineProperty实现computed属性、为什么getter函数在依赖值不发生变化时不会重新执行，以及dirty标志在computed watcher中的作用。通过这些知识，您将对Vue 2的响应式系统有更深入的理解。

computed属性的默认行为

computed属性是Vue 2中的一种特殊属性，它允许您定义一个计算值，该值依赖于其他属性的值。当这些依赖项发生变化时，computed属性的值也会自动更新。

默认情况下，computed属性是惰性的，这意味着它们只有在被访问时才会计算。这可以提高性能，因为只有在需要时才会执行计算。

使用Object.defineProperty实现computed属性

Vue 2使用Object.defineProperty实现computed属性。Object.defineProperty允许您向对象添加或修改属性。在Vue 2中，computed属性被定义为一个getter函数，该函数返回计算值。当您访问computed属性时，Vue 2会自动调用getter函数并返回计算值。

为什么getter函数在依赖值不发生变化时不会重新执行

getter函数只有在依赖值发生变化时才会重新执行。这是因为Vue 2使用了一个叫做"脏检查"的机制来跟踪依赖值是否发生变化。脏检查是指Vue 2会在每次更新组件时检查依赖值是否发生变化。如果依赖值发生变化，则Vue 2会重新执行getter函数并返回计算值。

dirty标志在computed watcher中的作用

dirty标志是一个布尔值，它指示computed属性是否需要重新计算。dirty标志由computed watcher维护。computed watcher是一个特殊的Vue 2观察者，它负责跟踪computed属性的依赖值。当依赖值发生变化时，computed watcher会将dirty标志设置为true。当Vue 2调用getter函数时，它会检查dirty标志。如果dirty标志为true，则Vue 2会重新执行getter函数并返回计算值。如果dirty标志为false，则Vue 2会直接返回之前计算的值。

结论

通过本文，我们深入探讨了Vue 2核心原理，特别是computed属性。我们探讨了computed属性的默认行为、如何使用Object.defineProperty实现computed属性、为什么getter函数在依赖值不发生变化时不会重新执行，以及dirty标志在computed watcher中的作用。通过这些知识，您将对Vue 2的响应式系统有更深入的理解。