1.20220222-Vue computed原理
2.vue3-computed源码解析
3.vue3.2 源码浅析：watch、watchEffect、computed区别
4.Vue 计算属性（Computed）传参
5.Vue3源码解析（computed-计算属性）
6.Vue2源码学习笔记 - 10.响应式原理一computed与watch浅析

20220222-Vue computed原理

       本文解析 Vue.js 中的 computed 属性原理，涉及源码版本 2.6.。

       在面试过程中，computed 和 watch 的易商支付源码使用场景区别及源码理解出现频率较高，其中源码问题占比较小。本文将从初始化 computed 属性开始解析其原理。

       初始化 computed 属性涉及 initComputed 函数，该函数执行了两个关键操作：创建lazy watcher及在 vm 对象上定义名为 fullString 的 getter。lazy watcher 的核心特点是懒惰加载，即在首次访问时执行计算。此过程包括在 vm 上添加名为 fullString 的 getter，由 createComputedGetter 函数生成。

       当组件渲染函数触发时，会创建一个与渲染函数相关的 watcher。此时，Dep.target 被设置为这个 watcher。当组件实际更新时，如修改 vm.first 或 vm.second，会触发 getter 的调用，进而收集依赖，最终更新 fullString 的值。依赖收集机制使用 pushTarget 和 popTarget 实现，其作用类似栈操作，ranklib源码确保在 getter 执行期间正确收集依赖。

       在运行时阶段，当修改 vm.first 或 vm.second 时，会直接或间接调用两个 watcher。第一个 watcher 关联于 computed 属性，执行计算逻辑。第二个 watcher 与渲染函数关联，执行渲染逻辑，进而触发 getter 的调用。

       需要注意的是，Vue 中的 computed 属性不支持使用 async 函数，因为 async 函数返回的 promise 在渲染时无法正确处理，可能导致界面展示异常。

       总结，本文深入探讨了 Vue.js 中 computed 属性的实现机制及在实际应用中的考虑点，包括其初始化过程、依赖收集机制以及运行时行为，同时指出 async 函数的限制。

vue3-computed源码解析

       在 Vue 3 中，理解 computed 源码有助于深入掌握其工作原理。版本为 3.2.，通过单例测试和官网文档，我们了解到 computed 的主要特性是基于 getter 函数创建，类似于一个只读的procdump 源码响应式值，其更新依赖于传入的 getter 函数，而非直接修改.value属性。其核心逻辑与 ref 类似，利用 dep 和 trackRefValue/triggerRefValue 函数实现响应式。

       计算属性的实现分为两种：通过 computed 函数或 deferredComputed。两者都是 ref 类型，但 deferredComputed 在 effect 中具有异步特性，只有在下一次微任务中才会更新。在 Vue 中，通过ComputedRefImpl 对象管理计算属性，它使用 _value 和 _dirty 机制实现懒加载，当数据改变时，会触发收集函数并更新缓存值。

       在源码中，可以看到计算属性的 getter 被包装在 effect 中，依赖数据变化时会通过调度器来触发收集。但需要注意的是，当在 effect 内先改变依赖，再改变外部的计算属性，可能会导致异常。对于 deferredComputed，其调度器更为复杂，会在下一次微任务执行时处理异步更新。

       虽然 deferredComputed 的asmr源码处理存在一些特殊情况，如在微任务期间的值比较问题，但 Vue 通过缓存相关 effect 的值，以及 hasCompareTarget 变量，确保了异步更新的正确性。至此，我们已经详细了解了 Vue3 computed 的源码实现，接下来可以继续探索 effectScope 的源码。

       上一章：vue3-ref源码解析

       下一章：vue3-effectScope源码解析

vue3.2 源码浅析：watch、watchEffect、computed区别

       要理解Vue 3.2中watch、watchEffect、computed三者的区别，首先需要明确依赖收集和回调函数的概念。Vue应用启动时，会进行初始化操作，期间进行依赖收集；初始化结束后，用户修改响应式数据时，会触发回调函数。

       watchEffect()参数中的effect函数在应用启动期间会执行一次，进行依赖收集。watch()参数中的cb函数在应用启动期间默认不会执行，除非更改watch参数中的option值，使得两者等效。

       在初始化期间，configcenter源码computed()返回值被引用时，参数中的{ get}函数会执行；未被引用则不执行。这体现了computed()与watch、watchEffect的另一个区别。

       从执行时机上看，当被监听数据的值发生改变，computed()的回调函数会立即执行。watch()和watchEffect()的回调函数执行时机由option参数中的{ flush?: 'pre' | 'post' | 'sync' }决定。

       此外，computed()有返回值，并且返回值也会被监听；而watch()和watchEffect()没有返回值。

       接着，从源码的角度分析，无论是watch()还是watchEffect()，其实现都是通过调用doWatch()函数完成的。doWatch()函数创建依赖收集函数getter，创建调度函数scheduler，然后创建ReactiveEffect，并进行依赖收集。当修改被监听数据时，会触发schedule函数，根据{ flush}决定回调函数的执行时机。

       对于computed()，其源码从参数的option中获取getter和setter函数，返回一个ComputedRefImpl类型的对象。在构造函数中创建effect对象，但不进行依赖收集。依赖收集工作在调用get value()时完成。首次调用get value()后，修改被监听数据，会触发triggerRefValue(this)，进而通过get value()计算返回值。

       综上所述，了解Vue 3.2中watch、watchEffect、computed的区别，需要从原理和源码两方面入手。掌握这些知识点，有助于更深入地理解Vue的响应式系统和数据监听机制。

Vue 计算属性（Computed）传参

       在 Vue 中，若要让计算属性（Computed）接收参数，必须使用 return 返回一个包含参数的函数。下面以一个简单示例来说明。

       假设我们有一个计算属性，用于根据用户输入的年份（year）和月份（month）生成完整的日期。

       首先，我们创建一个 Vue 实例，并在其中定义计算属性 `fullDate`：

       { { fullDate }}

       在上述代码中，`fullDate` 使用 `return` 返回一个调用了 `generateFullDate` 方法的函数，这个方法接收年份和月份作为参数，并返回格式化的日期字符串。

       当用户在输入框中修改年份或月份时，Vue 会自动更新计算属性 `fullDate` 的值，同时将新的日期字符串显示在页面上。

       通过这种方式，我们成功地实现了计算属性接收参数的功能，使得 Vue 应用程序更加灵活和强大。

Vue3源码解析（computed-计算属性）

       作者：秦志英

       Vue3计算属性源码解析

       在理解了Vue3响应式系统后，我们继续深入剖析其核心组件——计算属性的实现机制。Vue3中的计算属性通过computed函数提供API，让我们通过源码来揭示其内部运作。

       在ComputedRefImpl类中，有两个关键私有属性：_value用于缓存计算结果，_dirty用于标记是否需要重新计算。当属性值改变时，会触发trigger函数，遍历并执行依赖的effect函数。如果effect配置了scheduler，那么计算属性的getter并不会立即执行，而是设置_dirty为false，并通知依赖的副作用函数。

       构造函数中，我们会包装getter函数为effect，并将其添加到依赖集合中。同时，lazy和scheduler参数控制了计算属性在何时调度。让我们通过一个示例来看计算属性的完整流程：当点击按钮改变testData时，计算属性的更新流程如图所示。

       总结：计算属性特性

       计算属性的主要特性包括：其值依赖于其他属性的更新，但只有在必要时才会重新计算，且通过lazy和scheduler配置实现灵活调度。如果你对Electron感兴趣，不妨关注我们的开源项目Electron Playground，了解更多技术知识。

       我们是好未来·晓黑板前端技术团队，持续分享最新技术动态。关注我们：知乎、掘金、Segmentfault、CSDN、简书、开源中国、博客园。

Vue2源码学习笔记 - .响应式原理一computed与watch浅析

       本文仅简要介绍Vue2源码中计算属性和侦听属性的初始化过程，深入研究响应式原理将在后续内容中进行。

       计算属性初始化：在Vue实例化过程中，传入的计算属性配置被传递至initComputed函数。该函数生成每个计算属性的Watcher对象，且设置lazy选项为真。通过defineComputed函数定义计算属性为响应式变量，实现计算属性的初始化。在defineComputed中，使用Object.defineProperty将计算属性设置为响应式属性，通过生成getter函数（如computedGetter），在获取属性值时，计算并收集依赖。

       侦听属性初始化：在initState函数中，侦听属性的初始化调用initWatch函数。此函数直接将侦听属性传递至Vue.prototype.$watch方法，配置侦听属性与回调函数，实现侦听属性的初始化。$watch方法实例化Watcher对象，监听属性变动，当检测到变动时执行回调函数。

       总结：计算属性与侦听属性的初始化相对简化，主要依赖于Watcher类。计算属性通过生成Watcher对象与getter函数，实现响应式计算与依赖收集；侦听属性则通过配置Watcher对象与回调函数，实现属性变动时的自动响应。在后续内容中，将深入研究Watcher类及其与计算属性、侦听属性的关联与配合机制。

Vue3前端：计算属性computed与普通方法的区别

       本文对比Vue3中的计算属性computed与普通方法的区别，核心在于缓存机制。当依赖的属性值保持不变时，computed只会执行一次计算，而普通方法则每次调用都会执行。

       以计算总价为例，输入商品单价与购买数量。使用computed，总价只会根据单价与数量变动一次，优化性能。普通方法则会重复计算，导致不必要的性能开销。

       代码实现如下：

       computed的不可修改属性特点，仅允许读取，不能直接修改。若需修改计算结果，可以通过实现get()与set()方法，根据依赖值重新计算。实现代码如下：