1.Vue2源码学习笔记 - 10.响应式原理一computed与watch浅析
2.每天学点Vue源码: 关于vm.$watch()内部原理
3.vue3.2 源码浅析：watch、码分watchEffect、码分computed区别
4.Client-go源码之ListerWatcher接口
5.20220222-Vue computed原理
6.Vue原理Watch - 白话版

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

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

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

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

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

每天学点Vue源码: 关于vm.$watch()内部原理

       深入探讨Vue源码，解析vm.$watch()的内部原理，让我们从整体结构入手。使用vm.$watch()时，首先数据属性被整个对象a进行观察，这个过程产生一个名为ob的Observe实例。在该实例中，存在dep，它代表依赖关系，而依赖关系在Observe实例内部进行存储。接下来，我们聚焦于内部实现细节，深入理解vm.$watch()在源码中的锤子oa源码运作机制。

       在Vue的源代码中，实现vm.$watch()功能的具体位置位于`vue/src/core/instance/state.js`文件。从这里开始，我们移步至`vue/src/core/observer/watcher.js`文件，探寻更深入的实现逻辑。此文件内，watcher.js承担了关键角色，管理着观察者和依赖关系的关联。

       在深入解析源码过程中，我们发现，当使用vm.$watch()时，Vue会创建一个Watcher实例，这个实例负责监听特定属性的变化。每当被观察的属性值发生变化时，Watcher实例就会触发更新，确保视图能够相应地更新。这一过程通过依赖的管理来实现，即在Observe实例内部，依赖关系被封装并存储，确保在属性变化时能够准确地通知相关的Watcher实例。

       总的来说，vm.$watch()的内部实现依赖于Vue框架的观察者模式，通过创建Observe实例和Watcher实例来实现数据变化的监听和响应。这一机制保证了Vue应用的响应式特性，使得开发者能够轻松地在数据变化时触发视图更新，从而构建动态且灵活的应用程序。

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()的回调函数执行时机由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的响应式系统和数据监听机制。

Client-go源码之ListerWatcher接口

       ListerWatcher接口将Lister和Watcher接口融合，前者负责与APIServer通信以获取全量对象，后者负责监控对象的增量变化。List-Watch机制旨在提升访问效率，缠论 源码避免过多客户端频繁获取全量资源信息，减轻APIServer负载。通过本地缓存和监听变化，仅需一次获取全量对象并同步本地缓存，后续监听变化同步缓存即可，大幅优化与APIServer通信效率。

       接口定义明确，ListerWatcher包含List和Watch两个核心函数，分别用于获取全量对象和监听对象变化。具体实现中，ListerWatcher通过调用ListFunc和WatchFunc来分别执行List和Watch操作。各资源类型Informer通过注册自己的ListWatch结构，实现在创建时自动调用特定的List和Watch函数，如Deployment的Informer，利用其资源类型对应的ClientSet初始化ListWatch，并仅返回该类型对象。

-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 实现，其作用类似栈操作，确保在 getter 执行期间正确收集依赖。

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

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

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

Vue原理Watch - 白话版

       专注 Vue 源码分享，白话版旨在让读者轻松理解 Vue 工作原理和设计思想。在深入理解框架的同时，源码版则为开发者提供内部操作的清晰视角。如需获取更优质的内容，欢迎关注公众号。

       在本文中，我们将使用白话文解读 Vue 的 `watch` 功能，帮助读者快速理解其工作原理。你可能已经熟悉 `watch` 的用法，但了解它的内部运行机制将为你的开发工作带来意想不到的效率提升。

       Vue 的 `watch` 功能设计简洁，实现逻辑易于理解。在本文中，我们将关注三个关键点：数据改变时 `watch` 的工作方式、设置 `immediate` 时的行为变化以及使用 `deep` 选项时的深层监听机制。

       首先，了解 Vue 的响应式机制至关重要。Vue 通过为数据添加 `get` 和 `set` 方法来实现响应式。当数据被读取时，`get` 方法被触发，收集到依赖的数据源；当数据被改变时，`set` 方法被触发，通知所有依赖数据的组件进行更新。

       接下来，我们具体探讨 `watch` 的工作流程。初始化阶段，`watch` 会读取监听数据的值，并收集到其内部的 watcher 中。随后，根据你设置的 handler，`watch` 将其放入更新函数中。当数据发生变化时，`watch` 的 watcher 通知 handler 执行更新操作。

       当我们设置 `immediate` 选项时，`watch` 的行为发生改变。此时，初始化过程会立即调用 handler，并传入刚刚读取的值，而不仅仅是数据改变时才触发。

       使用 `deep` 选项时，`watch` 实现了深度监听。这意味着当你监听的对象属性发生变化时，无论其内部结构如何复杂，`watch` 都能捕捉到变化并触发相应的回调。为了深入理解这一特性，我们首先需了解 `Object.defineProperty` 的使用，它允许我们为对象属性设置 `get` 和 `set` 方法。

       通过 `Object.defineProperty` 设置 `get` 和 `set` 方法后，我们发现：直接读取或修改对象属性时，`get` 和 `set` 方法会被触发；但当修改对象内部属性时，`get` 方法会触发，而外部设置的 `get` 方法不会被触发。通过实例展示这一现象，我们可以更直观地理解深度监听机制。

       我们以 `info` 为例，假设 `info` 为一个对象，当设置 `deep` 选项时，Vue 会递归遍历对象属性，为每个属性添加 `get` 和 `set` 方法，从而实现深度监听。初始化阶段，`watch` 会读取监听数据，并收集到其内部的 watcher 中。若设置了 `deep`，在读取 `info` 时，Vue 会递归遍历，为对象内部属性添加收集器，确保无论对象结构如何嵌套，只要属性发生变化，`watch` 都能检测到并触发回调。

       为验证 `watch` 的深度监听机制，我们可以在内部为 watcher 添加特定标识，以此证明其收集能力。通过这一实践，我们可以观察到，无论对象结构多么复杂，只要属性发生变化，`watch` 都能准确地收集到对应 watcher，确保回调的正确触发。

       本文旨在通过白话方式阐述 Vue `watch` 的核心机制，帮助读者在实际开发中更灵活地应用 `watch`。我们总结了响应式、初始化阶段、`immediate` 和 `deep` 选项的用法，以及如何通过实践验证这些机制。希望读者通过本文的阅读，能够对 Vue 的 `watch` 有更深入的理解。如果你有任何疑问或反馈，欢迎随时留言或联系作者。

今天我们来聊聊spring一个比较有用的工具类：StopWatch

       在日常的开发工作中，你是否曾经对某个方法的执行时间感到好奇？是否需要一个工具来帮你精确计算？今天，让我们一起探索Spring工具包中的一个强大工具类——StopWatch，它能帮助我们更精确地计算方法的执行时间，提高代码的可读性和维护性。

       在编写代码时，我们常常需要了解某些操作的执行效率。例如，对于一个复杂的循环或嵌套调用，精确测量这些操作的时间成本变得至关重要。传统的做法是使用系统时间，但这往往不够精确，而且代码显得不够优雅。StopWatch工具类的出现，为我们提供了更好的解决方案。

       StopWatch是一个计算同步单线程执行时间的工具类，属于Spring工具包org.springframework.util下的成员。它的使用方法非常直观，能够帮助我们更清晰地了解代码的执行过程。

       例如，我们可以通过以下代码来使用StopWatch：

       这段代码展示了如何使用StopWatch来记录方法的执行时间。执行结束后，使用prettyPrint方法可以得到格式化的输出，显示出每个操作的执行时间以及占总执行时间的百分比，让代码的可读性大大提高。

       除了prettyPrint方法，StopWatch还提供了其他两个方法，用于计算所有任务的总执行时间和获取总毫秒数。这使得我们能够全面了解整个流程的性能表现。

       接下来，让我们一起探索StopWatch的源码，深入理解它是如何实现这些功能的。

       首先，我们关注StopWatch的一些核心属性，如elapsed（已过时间）和elapsedMillis（已过毫秒数）等。这些属性帮助我们实时了解执行状态。

       接下来，我们分析start和stop方法。start方法开始记录时间，而stop方法则结束记录，并计算并输出结果。通过这两个方法的调用，我们能够轻松获取所需的时间信息。

       在StopWatch内部，存在一个Task类，用于存储各个任务的执行信息。Task类中包含了任务的开始时间、结束时间以及执行时间等数据，为后续的输出和分析提供了基础。

       此外，还有一个用于打印任务信息的方法，它可以将每个任务的执行时间以格式化的方式输出，使我们能够直观地看到每个操作的执行情况。

       总的来说，StopWatch工具类通过简洁的封装，为开发者提供了一种高效、直观的方法来测量代码执行时间。与其他类似工具类（如Google的Commons或Apache的StopWatch）相比，Springframework.util.StopWatch在性能和易用性方面表现出色，值得推荐。

       通过使用StopWatch，我们不仅能够提高代码的可读性和维护性，还能够更深入地了解应用程序的性能瓶颈。下次你遇到需要精确测量执行时间的场景时，不妨尝试使用StopWatch，也许你会发现它能为你的开发工作带来意想不到的便利。

浅析Vue中的$watch方法原理

       $watche方法的两个参数：

       第一个参数两种可能：

       传入被观察对象表达式（字符串），比如'a,b,c','$route'

       如果表达式无法表示需要观察的内容，可以通过函数返回，比如:()=>this.a+this.b

       第一个参数干什么用的？通过vue源码可得，newWatcher的流程：第一步：拿到第一个参数，如果是函数，直接拿到函数，如果不是函数，转换为函数（parsePath），这个作为getter，先不调用，只备用

//parseexpressionforgetterif(typeofexpOrFn==='function'){ this.getter=expOrFn}else{ this.getter=parsePath(expOrFn)if(!this.getter){ this.getter=noop//noop就是空}}

       第二步：调用Watcher类里的this.get：

this.value=this.lazy?undefined:this.get()

       插入下源代码：

/***Evaluatethegetter,andre-collectdependencies.*/get(){ pushTarget(this)letvalueconstvm=this.vmtry{ value=this.getter.call(vm,vm)}catch(e){ if(this.user){ handleError(e,vm,`getterforwatcher"${ this.expression}"`)}else{ throwe}}finally{ //"touch"everypropertysotheyarealltrackedas//dependenciesfordeepwatchingif(this.deep){ traverse(value)}popTarget()this.cleanupDeps()}returnvalue}

       第三步：上面的源码就是this.get方法，看看里面有什么，这里第一句就是把当前watcher实例设置成Dep.target（姑且理解为全局变量），：

pushTarget(this)

       关于Dep.target：回忆一下，在defineProperty的get里，是不是也用到了这Dep.target，对了！defineProperty里就是取这个Dep.target值，watcher只有一处取值，一处赋值，那么这个值在哪里赋上去的呢？对了！就是在这个pushTarget里

       第四步：Dep.target已经有值了，调用一下之前备用的getter（上面第一步），这样就能触发defineProperty的get了，触发以后，就把这个watcher添加到get对应数据的deps依赖数组里了

value=this.getter.call(vm,vm)

       这样，再修改这个设置了defineProperty的响应式数据，就能触发这个数据绑定的所有watcher依赖了。

Vue3源码系列 (一) watch

       本文深入解析 Vue3 中 watch 的机制。首先，我们了解 watch 接收三个参数：监听的数据源 source、回调 cb 以及可选的 options。options 包括 immediate、deep、flush、onTrack 和 onTrigger，用于控制立即执行、深度监听、回调时机以及收集依赖和触发更新时的自定义函数。回调 cb 接收 value、oldValue 和 onCleanUp 参数，用于执行特定操作，如响应表格页码变化重新请求数据，并在副作用清理时调用 onCleanUp 函数。

       watch 支持监听单个数据或多个数据，其参数类型包括 WatchSource、响应式对象、MultiWatchSources 和 Readonly。单个数据源可以是 WatchSource 或响应式的对象，多个数据源则为 MultiWatchSources 或 Readonly。

       watch 的核心在于 doWatch 函数，它接收与 watch 类似的参数。在源码中，doWatch 负责实现 watch 的逻辑。首先，它会检查是否提供了回调函数 cb。如果没有，且 options 中设置了 immediate 和 deep，会抛出警告，因为这些选项只对有回调的 doWatch 签名有效。接着，设置 getter，并配置强制触发和深度监听。根据 source 的类型，doWatch 进行不同的处理。

       在处理源数据后，doWatch 会创建 effect，这是 Vue3 中实现响应式的关键。effect 通过 getter 获取当前值，然后在回调函数中使用 newValue 和 oldValue。这使得 watch 能在数据变化时触发回调函数，执行相应的操作。

       总结，本文详细阐述了 Vue3 中 watch 的工作原理，从参数类型、回调函数到核心实现 doWatch 函数，全面深入地解析了 watch 的机制，帮助开发者更好地理解和运用 Vue3 的响应式特性。通过本文，读者可以深入了解 Vue3 watch 的内部工作流程，为构建高效、响应式的 Vue 应用提供技术支持。