温故而知新,Vue 2 和 Vue 3 对 computed 的实现

发布网友发布时间：2024-09-30 14:57

共1个回答

热心网友时间：2024-11-30 05:59

在Vue中，计算属性computed是处理复杂逻辑的利器，其基于响应式依赖进行缓存，只在相关依赖改变时重新计算，从而优化性能。计算属性与侦听器watch的区别在于，计算属性创建新属性并挂载于实例上，而侦听器监听实例上已有的响应式属性。计算属性具有惰性求值特性，只有在依赖改变时才重新求值。侦听器则在依赖数据改变时执行回调。

在Vue2中，计算属性初始化发生在实例初始化过程中，通过`initState`和`initComputed`函数实现。计算属性先于watch初始化，因为计算属性依赖响应式属性的缓存特性。`initComputed`创建Watcher实例，标记lazy和dirty属性，以便在计算属性依赖改变时重新求值。`defineComputed`方法通过`Object.defineProperty`添加计算属性，其`get`和`set`方法在计算属性依赖改变时触发更新。计算属性初始化完成，通过`evaluate`方法在依赖改变时重新计算。

Vue3简化了计算属性的使用，接受getter函数或包含get和set的函数。计算属性基于响应式属性值计算，依赖改变触发effect的scheler执行。在getter方法中，`_dirty`变量表示是否需要计算值。当依赖改变时，调用scheler将`_dirty`设为true，通知重新计算。第一次获取计算属性值时，依赖属性被访问，进行依赖收集操作，使得计算属性能感知内部依赖的变化。

在Vue3中，增加computed调试功能，接受`onTrack`和`onTrigger`选项。这些方法在开发模式下用于跟踪依赖属性和处理依赖改变。当计算属性getter被调用时，触发`trackRefValue`方法，如果存在`onTrack`回调，则执行之。类似地，当依赖属性改变时触发`onTrigger`方法。

综上，无论是Vue2还是Vue3，计算属性的实现核心思想是基于响应式依赖的惰性求值和缓存机制，确保在依赖改变时动态计算新值。Vue3在Vue2的基础上简化了计算属性的使用和调试，提供更高效的性能和更便捷的开发体验。