1.vue3-computed源码解析
2.vue3.2 源码浅析：watch、源码watchEffect、源码computed区别
3.Vue2.6x源码解析（二）：初始化状态
4.Vue2源码学习笔记 - 10.响应式原理一computed与watch浅析
5.『前端优化』—— Vue中避免滥用this去读取data中数据
6.Vue computed 的源码内部实现原理
vue3-computed源码解析
在 Vue 3 中，理解 computed 源码有助于深入掌握其工作原理。源码版本为 3.2.，源码通过单例测试和官网文档，源码基站监测源码我们了解到 computed 的源码主要特性是基于 getter 函数创建，类似于一个只读的源码响应式值，其更新依赖于传入的源码 getter 函数，而非直接修改.value属性。源码其核心逻辑与 ref 类似，源码利用 dep 和 trackRefValue/triggerRefValue 函数实现响应式。源码
计算属性的源码实现分为两种：通过 computed 函数或 deferredComputed。两者都是源码 ref 类型，但 deferredComputed 在 effect 中具有异步特性，源码只有在下一次微任务中才会更新。在 Vue 中，通过ComputedRefImpl 对象管理计算属性，它使用 _value 和 _dirty 机制实现懒加载，当数据改变时，会触发收集函数并更新缓存值。
在源码中，可以看到计算属性的 getter 被包装在 effect 中，依赖数据变化时会通过调度器来触发收集。但需要注意的是，当在 effect 内先改变依赖，再改变外部的计算属性，可能会导致异常。对于 deferredComputed，其调度器更为复杂，会在下一次微任务执行时处理异步更新。线程wait源码
虽然 deferredComputed 的处理存在一些特殊情况，如在微任务期间的值比较问题，但 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值，使得两者等效。
在初始化期间，computed()返回值被引用时，参数中的{ get}函数会执行；未被引用则不执行。这体现了computed()与watch、watchEffect的另一个区别。
从执行时机上看， 是 源码
此外，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、ce源码解析computed的区别，需要从原理和源码两方面入手。掌握这些知识点，有助于更深入地理解Vue的响应式系统和数据监听机制。
Vue2.6x源码解析（二）：初始化状态
深入解析Vue2.6x源码中的初始化状态过程，包括props、methods、data、computed属性与watcher的初始化原理与实现。
首先，初始化状态涉及的props数据传递机制由父组件至子组件，通过props字段选择所需内容。Vue.js内部对props进行筛选后，将其添加至子组件上下文。值得注意的是，props的规格化处理在子组件实例创建时执行，该步骤发生在initProps函数之前，通过mergeOptions方法中的normalizeProps函数完成。
测试数据验证了筛选过程，数据通过proxy代理方法在子组件实例上定义访问属性，这些属性实际指向了内部_data对象。
初始化方法在initMethods阶段，主要是遍历methods对象，将方法挂载至vm实例，同时进行合法校验并给出警告提示。
在initData阶段，数据初始化过程简洁高效。首先获取组件中的data对象，然后循环遍历并定义相应的key属性在vm实例上，通过proxy代理指向vm._data对象，拳皇html源码实现响应式数据的访问。观察者机制的内部原理将在后续的Observer/Dep/Watcher部分详细阐述。
测试数据显示，data定义的属性通过proxy代理被vm实例化为可访问属性，这些属性实际上指向了真正的响应式数据。
接下来，我们关注initComputed阶段，详细解析计算属性computed的内部原理。computed属性在vm实例上被定义为特殊的getter方法，其独特之处在于内部代理函数的使用，结合Watcher实现缓存与依赖收集功能。在定义计算属性前，还涉及到createComputedGetter方法的检查，服务器渲染环境下的特殊处理，以及shouldCache变量的设置。
测试数据再次验证了计算属性的正确实现与功能。
最后，初始化watcher阶段，只有在用户设置了watch选项且不等于浏览器原生watch时才进行初始化。watcher的初始化在最后执行，以确保可以监听到初始化完成的props、data、computed属性。解析watch内部实现，重点在于createWatcher方法，以及$watch方法的使用。$watch方法创建watcher，观察目标依赖变化，并执行用户传入的回调函数，实现数据响应式更新。
总结，Vue2.6x的初始化状态过程涉及多方面机制，包括数据传递、方法挂载、属性定义以及依赖监听，这些设计与实现共同构成了Vue框架的高效响应式系统。
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类及其与计算属性、侦听属性的关联与配合机制。
『前端优化』—— Vue中避免滥用this去读取data中数据
在 Vue 中，通过 `this` 访问 `data` 中的数据是一种常见的操作，但这种做法在某些情况下可能导致不必要的性能问题。本文旨在探讨如何避免滥用 `this` 访问 `data` 中数据，以及滥用 `this` 的影响和如何优化代码以提高性能。
在 Vue 的源码中，`data` 的值会被封装成响应式的，这意味着当访问 `data` 中的值时，会触发 `getter` 函数。`getter` 函数的执行会收集依赖，以便在数据改变时更新视图。然而，如果在 `getter` 函数中滥用 `this` 访问 `data`，会导致依赖被重复收集，从而增加性能开销。
依赖（Watcher）在 Vue 的生命周期中扮演着关键角色，特别是在 Vue 的渲染过程中。依赖会在组件渲染时创建，以确保数据变化时视图能够更新。通常，依赖可以分为三种类型：watcher（侦听器）、computed（计算属性）和渲染依赖。其中，渲染依赖是组件渲染过程中创建的，通常在首次渲染时出现。
在使用 `computed` 属性时，如果属性值是一个函数或对象，`getter` 将是该函数或对象的 `get` 方法。在函数或对象的 `get` 方法中使用 `this` 访问 `data` 可能会导致性能问题。例如，在计算属性 `d` 中，如果它通过循环访问 `this.a`（一个数组）中的元素并进行计算，这将导致依赖的重复收集，进而影响性能。
为避免滥用 `this` 访问 `data` 中的数据，可以采用 ES6 的解构赋值来提前获取 `data` 中的值，这样只在计算属性或模板渲染中读取一次数据，从而避免了多次依赖收集。同时，在模板中使用 `v-for` 循环时，应避免在循环内部对数组或对象进行复杂的逻辑操作，以减少依赖的收集次数，优化性能。
通过优化代码结构和访问方式，可以显著提高 Vue 应用的性能，确保应用在处理大量数据时仍然高效、流畅。在实际开发中，应始终关注依赖的管理，避免不必要的依赖收集，从而提升应用的整体性能。
Vue computed 的内部实现原理
Vue.js的魅力在于其强大的视图层管理，其中computed属性就是一项关键技术，它简化了模板中的复杂逻辑，确保代码的清晰易读。让我们通过实例深入理解它的内部运作原理。简洁的模板与计算属性
想象一下这样的场景：<div id="example">
<p>Original message: { { message }}</p>
<p>Computed reversed message: { { reversedMessage }}</p>
</div>
<script>
new Vue({
el: '#example',
data: { message: 'Hello' },
computed: {
reversedMessage: function () {
return this.message.split('').reverse().join('');
}
}
});
运行这段代码，你会看到Original message显示"Hello"，Computed reversed message则是"olleH"。这是computed属性的直观应用，它确保了在模板中只显示经过计算的结果，而非原始逻辑。响应式与缓存机制
Vue的计算属性并非一劳永逸地运行，而是基于依赖关系和缓存策略。当数据改变时，只有相关的计算属性才会重新计算。这就意味着，即使依赖的数据更新，只要结果没有变化，Vue会利用缓存来避免不必要的渲染，提升了性能。 深入源码，你会发现计算属性在组件初始化时，会为每个属性创建一个Watcher对象，lazy属性默认开启，只有在首次访问时才会触发计算。这确保了在数据变化时，计算的高效执行。计算属性内部实现
Vue的计算属性是通过getter方法实现的，其核心代码如下：<strong>getter实现: </strong>
Object.defineProperty(target, key, {
enumerable: true,
configurable: true,
get: (isServerRendering() ? noop : createComputedGetter(key)),
set: (userDef.get ? (shouldCache && !userDef.cache ? createComputedGetter(key) : createGetterInvoker(userDef.get)) : noop)
});
getter内部，当依赖的数据发生变化时，计算属性的Watcher会检测到并调用evaluate方法重新计算值，同时更新其dirty标志以标记是否需要渲染。优化与性能
Vue巧妙地处理了计算属性的更新策略，当值未变时，避免了不必要的组件渲染，确保了性能。这在依赖数据变化频繁但结果稳定的场景中尤为重要。计算属性与方法、watch的比较
计算属性利用缓存，仅在依赖更新时重新计算，降低了对性能的影响。
相比之下，methods是无缓存的，一旦满足条件，函数立即执行，没有依赖跟踪。
对于异步或耗时操作，watch更适合，因为它可以更灵活地处理变化，包括设置回调和监听。
总结来说，Vue的computed属性是高效、智能的解决方案，它将复杂的逻辑隐藏在背后，让你的模板保持简洁，同时保证了数据的实时性和性能。通过理解其内部实现，我们可以更好地利用和优化Vue应用中的计算属性。
