皮皮网

1.浅析Vue中的源码$watch方法原理
2.Vue源码实现之watcher拾遗
3.Vue原理依赖更新 - 源码版
4.Vue2源码学习笔记 - 10.响应式原理一computed与watch浅析
5.每天学点Vue源码: 关于vm.$watch()内部原理
6.vue双向绑定原理实现

浅析Vue中的$watch方法原理

       $watche方法的两个参数：

       第一个参数两种可能：

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

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

       第一个参数干什么用的源码？通过vue源码可得，newWatcher的源码流程：第一步：拿到第一个参数，如果是源码nir函数源码函数，直接拿到函数，源码如果不是源码函数，转换为函数（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依赖了。

Vue源码实现之watcher拾遗

       Vue源码中的Watcher类设计精妙，它在响应式原理的基础之上，添加了额外的处理机制。构造函数中的新特性包括两个额外参数：deps和newDeps。它们在数据更新时，帮助管理watcher与数据的依赖关系，确保只在真正需要时重新渲染视图，避免不必要的性能开销。

       在Watcher的初始化过程中，get方法至关重要。它首先将watcher添加到Dep.target的堆栈中，触发依赖的收集。当数据属性被读取时，依赖对象dep的depend方法会被激活，进而将watcher添加到新Deps中。同时，之前的依赖可能会被清理，将不再需要的watcher从旧的依赖列表中移除，只保留最新的依赖，存储在watcher.deps中。自适应框架源码

       getter的主要作用就是“touch”被监控的数据，以此触发依赖的收集。如果传入的是函数，如渲染watcher的updateComponent，getter会直接调用该函数，遍历并处理所有引用的数据，确保数据变化时能正确响应。

       在设置依赖收集标志时，Vue使用pushTarget和popTarget来管理依赖的嵌套。在计算属性的处理中，pushTarget确保依赖收集的正确顺序，让计算属性watcher收集到的依赖只影响到它自身，而popTarget则恢复到之前的渲染watcher状态，以便继续正常的视图更新流程。

       总的来说，Vue的Watcher类通过这些机制实现了高效、精准的数据依赖跟踪，确保了响应式系统的稳定和性能。

Vue原理依赖更新 - 源码版

       本文深入剖析Vue源码中的依赖更新机制，带你从源码层面理解这一关键概念。依赖更新是响应式系统中不可或缺的一环，它确保了数据变化时视图的及时响应。理解依赖更新，需要从依赖收集的微家园家源码背景出发，掌握其核心逻辑。

       依赖收集是响应式系统中数据变化追踪的基础，它使得Vue能够在数据变动时，自动更新相关视图。此过程涉及基本数据类型和引用数据类型的收集，为依赖更新奠定了基础。

       依赖更新的核心操作是调用`Object.defineProperty`的`set`函数。当数据值发生改变时，`set`函数被触发，从而触发依赖更新。这一步骤是依赖更新的关键，实现了数据变化与视图更新之间的联动。

       依赖更新的精髓在于通知机制。这一机制通过`dep.notify`函数实现，负责遍历依赖存储器，并调用`watcher.update`方法，以此触发视图的更新。`dep`是依赖存储器的核心，存储了所有与数据变化相关的监视器（`watcher`）。

       了解`dep`和`watcher`的交互是理解依赖更新的关键。`dep`负责收集依赖，而`watcher`则在数据变化时触发视图更新。当数据变化触发`dep.notify`时，`watcher.update`方法被调用，新闻小程序源码执行预设的更新函数。这个过程涉及数据的重新读取、DOM节点的生成与插入，实现了视图的即时响应。

       从Vue实例创建到初始化，再到挂载页面，整个流程中`watcher`的更新函数起到了关键作用。这个函数通常包含了视图更新的具体逻辑，如调用渲染函数生成DOM节点。虽然涉及的源码较多，但核心在于重新生成DOM节点，确保页面在数据变化时能够实时更新。

       依赖更新的流程简而言之，包括直接调用`watcher.update`、执行渲染函数以生成DOM节点、以及更新DOM节点以完成页面更新。这一机制确保了Vue应用在数据变化时的高效响应，使得用户体验更加流畅。

       理解Vue依赖更新不仅有助于深入掌握Vue源码，还能提升开发者在实际项目中的应对能力，特别是在复杂应用中处理数据变化与视图更新的关系。通过细致分析Vue源码，可以更加清晰地认识到这一机制在实际应用中的实现细节与优化空间。

       如有任何描述不当或疑问，欢迎在后台联系作者，共同探讨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源码: 关于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应用的响应式特性，使得开发者能够轻松地在数据变化时触发视图更新，从而构建动态且灵活的应用程序。

vue双向绑定原理实现

       数据双向绑定的核心在于实现视图与数据之间的实时同步更新，达到一种动态响应的效果。Vue通过实现MVVM模式，实现这一目标。

       Vue的双向绑定，其原理主要依赖于Object.defineProperty()方法，重新定义对象属性的获取和设置操作。以此，当数据发生改变时，视图能实时响应并更新，反之亦然。

       在Vue中，数据双向绑定的实现需借助三个关键组件：Observer、Watcher和Compile。

       Observer组件作为数据监听器，通过Object.defineProperty()方法，对所有属性进行劫持监听。当属性值发生变化时，会通知订阅者Watcher进行更新。这里引入了Dep消息订阅器，用于收集所有Watcher，并进行统一管理。此组件将数据变化与视图更新之间的联系紧密绑定。

       Watcher组件在接收到属性变化通知后，执行相应的更新函数，从而更新视图。这样的机制确保了数据与视图之间的实时同步。

       Compile组件负责解析HTML模板中的指令，初始化数据和订阅者Watcher，并将模型数据与视图组件绑定。通过指令解析，Vue能够实现数据的实时绑定和视图的动态更新。

       数据双向绑定的流程如下：首先，使用Observer对数据进行劫持监听，监测数据变化。然后，通过Watcher处理数据变化通知，触发视图更新。最后，Compile解析模板中的指令，初始化数据和订阅者，实现数据与视图之间的动态绑定。

       Vue源码中，v-model的实现涉及Observer、Watcher和Compile三个组件协作，共同完成数据与视图之间的双向绑定，实现高效的数据驱动视图更新。