1.【Vue原理】Watch - 白话版
2.vue动态监听？
3.Vue2源码学习笔记 - 10.响应式原理一computed与watch浅析
4.Vue3源码系列 (一) watch
5.vue3.2 源码浅析：watch、源码watchEffect、源码computed区别
6.每天学点Vue源码: 关于vm.$watch()内部原理

【Vue原理】Watch - 白话版

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

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

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

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

       接下来，我们具体探讨 `watch` 的工作流程。初始化阶段，`watch` 会读取监听数据的值，并收集到其内部的 watcher 中。随后，根据你设置的 handler，`watch` 将其放入更新函数中。uds上位机源码当数据发生变化时，`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` 有更深入的理解。如果你有任何疑问或反馈，欢迎随时留言或联系作者。

vue动态监听？

       --浅谈：Vuewatch监听deep、immediate属性

       Vuewatch用于监测数据变化，可以方便开发中对于数据的变化做出一些处理。关于deep、immdiate属性场景使用总结如下，如有疏漏，烦请指正。

       watch监听只有在数据变化时才会执行监听函数。溯源码燕窝封口父组件向子组件动态传值时，子组件props首次获取到父组件传来的默认值时，此时也需要执行watch监听函数。则需设置immediate：true.

       需要监听复杂数据（对象）内部属性的变化时，设置deep属性。Vue会递归的侦听数据和属性的变化（性能消耗较大）。也就是给所有数据和属性添加handler执行函数。

       监听notes对象，未添加deep:

       执行效果

       监听notes对象，，添加deep属性：

       性能优化

       鉴于deep属性Vue性能消耗较大，对于要监听数据中某个属性的响应时，可以只给对应属性添加deep。如下示例，只需侦听属性b的响应变化。

       vue-watch监听动态表单的数据

       也就是说，我们要监听的是ruleForm对象中的domains属性，此时需要用到深度监听

       此时，ruleForm的属性一发生变化，就会被watch属性监听到，对应的值就会发生变化。

       还有一个比较容易理解的写法：

       首先通过计算属性来获取vuex中的数据

       再通过watch来监听计算属性中的值来获取变化

       通常我们在vue文件中监听数据的变更，尤其是vuex中数据的变更非常方便，通过watch函数可以很便捷的拿到数据变更前后的值，并作出相应的处理。

       但是，当我们需要在诸如js等文件中监听到数据的变更就会很不容易，所幸，vue官网提供了解决思路

       watch(fn:Function,callback:Function,options?:Object):Function

       vuex的实例方法，接收两个参数：

       第一个参数为fn，响应式地侦听fn的返回值，当值改变时调用回调函数。fn接收store的nft系统源码开发state作为第一个参数，其getter作为第二个参数；

       第二个参数为一个可选的对象参数表示，类似于vue的watch的回调函数，表示新旧值。

       当我们不想监听时，可以通过定义变量接收该方法的返回值函数，调用该函数即可停止监听。

       优点：我们可以监听我们某个特定需要的值，并非常方便的类似vue文件中那样拿到新旧变化值

       弊端：当我们需要知道很多的值的变更情况时就得写大量的监听方法（可以考虑封装成方法或类）

       用法示例：

       1.在相应的js文件引入store

       2.调用store的watch实例方法，第一个函数参数返回一个需要监听的state中的值（比如我想监听vuex中的pathName的变化情况，就返回该值）

       3.第二个参数同vue的watch，接收2个参数代表新旧值

       4.通过变量watchFun接收watch的返回值，调用该方法会停止监听

       如上，就是如何在js等非vue文件中监听vuex数据的变化方式。

       就如文中提到的缺点，当数据量过大时，写多次监听闲的不友好，可以考虑订阅mutation的方式管理大量数据。

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源码系列 (一) 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 应用提供技术支持。

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的响应式系统和数据监听机制。

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

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

       在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应用的响应式特性，使得开发者能够轻松地在数据变化时触发视图更新，从而构建动态且灵活的应用程序。