1.每天学点Vue源码: 关于vm.$watch()内部原理
2.最前端|详解VUE源码初始化流程以及响应式原理
3.Vue源码实现之watcher拾遗
4.Vue—关于响应式(四、深入学习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应用的响应式特性,使得开发者能够轻松地在数据变化时触发视图更新,从而构建动态且灵活的应用程序。
最前端|详解VUE源码初始化流程以及响应式原理
为大家分享一些实用内容,便于大家理解,希望对大家在 Vue 开发中有所助益,直接进入正题:
Vue 源码的入口是 src/core/instance/index.js,此文件负责在 Vue 的 prototype 上注册函数属性等,并执行 initMixin 中注册的 _init 函数。
继续观察流程,_init 方法代表初始化流程,主要代码如下:
如果是组件,则 _isComponent 为真,其他情况下都会执行 resolveConstructorOptions,该函数将用户设置的 options 和默认 options 合并。随后执行一系列初始化函数,如 initLifecycle 初始化生命周期,initEvent 初始化事件处理机制,initRender 初始化 vnode、插槽及属性等。接下来调用 beforeCreate 钩子函数,然后是 initInjections 和 initProvide 两个与通信相关的组件。
这里涉及到两个熟悉的生命周期函数:beforeCreate 和 created。对比 Vue 流程图,可以明确这两个钩子函数的执行时机。
它们之间实际上差了三个初始化过程。重点是 initState 方法:
在此方法中,如果传入 data 则执行 initData,否则初始化一个空对象。接下来可以看到 computed 和 watch 也是在这里初始化的。
简化后的 initData 代码:
此方法首先判断 data 是否为函数,若是则执行,否则直接取值,因此我们的 data 既可以函数,也可以是对象。然后循环 data 的网页 手机视频源码 key 值,通过 hasOwn 判断属性是否有重复。
isReserved 方法是判断变量名是否以 _ 或 $ 开头,这意味着我们不能使用 _ 和 $ 开头的属性名。然后进入 proxy 方法,该方法通过 Object.defineProperty 设置 get 和 set 将 data 的属性代理到 vm 上,使我们能够通过 this[propName] 访问到 data 上的属性,而无需通过 this.data[propName]。最后执行 observe,如下:
前面都是在做一些初始化等必要的判断,核心只有一句:
从这里开始,我们暂时中止 init 流程,开始响应式流程这条线。在阅读源码时,你总会被各种支线打断,这是没有办法的事情,只要你还记得之前在做什么就好。
Observer 类是 Vue 实现响应式最重要的三环之一,代码如下:
这里介绍一下 def 函数,这是 Vue 封装的方法,在源码中大量使用,我们可以稍微分析一下,代码如下:
可以看到,也是使用了 Object.defineProperty 方法,上文提到过。这是一个非常强大的方法,可以说 Vue 的双向绑定就是通过它实现的。它有三个配置项:configurable 表示是否可以重新赋值和删除,writable 表示是否可以修改,enumerable 表示该属性是否会被遍历到。Vue 通过 def 方法定义哪些属性是不可修改的,哪些属性是不暴露给用户的。这里通过 def 方法将 Observer 类绑定到 data 的 __ob__ 属性上,有兴趣的同学可以去 debugger 查看 data 和 prop 中的 __ob__ 属性的格式。
再说回 Observer,如果传入的数据是数组,则会调用 observeArray,电话录音 源码该函数会遍历数组,然后每个数组项又会去执行 observe 方法,这里显然是一个递归,目的是将所有的属性都调用 observe。这个 observe 方法实际上是 Vue 实现观察者模式的核心,不仅是在初始化 data 的时候用到。最终,data 上的每个属性都会走到 defineReactive 里面来,重点就在这里:
这个方法的作用是将普通数据处理成响应式数据,这里的 get 和 set 就是 Vue 中依赖收集和派发更新的源头。这里又涉及到了响应式另一个重要的类:Dep。
在这段代码中,通过 Object.getOwnPropertyDescriptor 获取对象的属性描述符,如果不存在,则通过 Object.defineProperty 创建。这里的 get 和 set 都是函数,因此 data 和 prop 中所有的值都会因为闭包而缓存在内存中,并且都关联了一个 Dep 对象。
当用户通过 this[propName] 访问属性时,就会触发 get,并调用 dep.depend 方法(下面的 dependArray 实际上就是递归遍历数组,然后去调用那个数据上的 __ob__.dep.depend 方法),当赋值更新时,则会触发 set,并调用 observe 对新的值创建 observer 对象,最后调用 dep.notify 方法。
总结起来就是,当赋值时调用 dep.notify;当取值时调用 dep.depend。这个方法的作用就在于此,剩下的工作交给了 Dep 类。
接下来我们可以看一下 Dep 类中做了什么。
这里多贴了一些代码,虽然不属于同一个类,但非常重要。这段代码初始化了一个 subs 数组,这个非常熟悉的openwrt wifi驱动源码数组就是我们经常在 Vue 的属性中看到的,它是一个观察者列表。
前文提到,当 key 的 getter 触发时会调用 depend,将 Dep.target 添加到观察者列表中。这样,在 set 的时候我们才能 notify 去通知 update。
另外,还要提一点,前面在设置 getter 时的代码中有这样一段:
那么既然已经执行了 dep.depend,为什么还要执行 childOb.dep.depend,这又是什么东西呢?
实际上,在数据的增删改查中,响应式的实现方式是不同的。setter 和 getter 只能检测到数据的修改和读取操作,因此这部分是由 dep.depend 来实现的。而 data 的新增删除的属性,并不能直接实现响应式,这部分是由 childOb.dep.depend 来完成的,这就是我们常用的 Vue.set 和 Vue.delete 的实现方式。
接着往下看,我们发现 depend 方法将 Dep.target 推入 subs 中。在上面定义中可以看到,它是一个 Watcher 类的实例,这个类就是响应式系统中的最后一环。
不过,我们暂时不管它,在这里还有一个重要的点:targetStack。可以看到有 pushTarget 和 popTarget 这两个方法,它们遵循着栈的原则,后进先出。因此,Vue 中的更新也是按照这个原则进行的。另外,大家可能注意到,这里似乎没有实例化 Watcher 对象,那么它是在什么地方执行的呢?下文会提到。
Watcher 的代码很长,我们这里只看一小段。当 notify 被触发时,会调用 update 方法。需要注意的是,这部分已经不是在 init 的流程中了,而是在数据更新时调用的。
这里正常情况下会执行 queueWatcher:
可以看到,当 data 更新时会将 watcher push 到 queue 中,然后等到 nextTick 执行 flushSchedulerQueue,nextTick 也是一个大家很熟悉的东西,Vue 当然不会蠢到每有一个更新就更新一遍 DOM。它就是通过 nextTick 来实现优化的,所有的改动都会被 push 到一个 callbacks 队列中,然后等待全部完成之后一次清空,一起更新。这就是一轮 tick。
言归正传,接着来看 flushSchedulerQueue:
实际核心代码就是遍历所有的 queue,然后执行 watcher.run,最后发出 actived 和 updated 两个 hook。
watcher.run 会更新值然后调用 updateComponent 方法去更新 DOM。至此,响应式原理的主体流程结束。说了这么多,其实下面这个流程图就能完整概括。
我们回到 init 的流程,上文中 init 的流程并没有执行完,还差这最后一句:
即通过传入的 options 将 DOM 给渲染出来,我们来看 $mount 的代码。
前面是在获取元素以及进行一系列的类型检查判断,核心就在 compileToFunctions 这个方法上。
看到这个 ast 我们就应该知道这个函数的作用了,通过 template 获取 AST 抽象语法树,然后根据定义的模板规则生成 render 函数。
这个方法执行完之后返回了 render 函数,之后被赋值在了 options 上,最后调用了 mount.call(this, el, hydrating)。
这个方法很简单,就是调用 mountComponent 函数。
这里的流程很容易理解。首先触发 beforeMount 钩子函数,然后通过 vm._render 生成虚拟 DOM(vnode)。这个 vnode 就是常说的虚拟 DOM。生成 vnode 后,再调用 update 方法将其更新为真实的 DOM。在 update 方法中,会实现 diff 算法。最后执行 mounted 钩子函数。需要注意的是,这里的 updateComponent 只是定义出来了,然后将其作为参数传递给了 Watcher。之前提到的 Watcher 就是在这个地方实例化的。
至此,init 的主体流程也结束了。当然,其中还有很多细节没有提到。我也还没有深入研究这些细节,之后有时间会进一步理解和梳理。这篇文章主要是为了自己做个笔记,也分享给大家,希望能有所帮助。如果文中有任何错误之处,请大家指正。
版权声明:本文由神州数码云基地团队整理撰写,若转载请注明出处。
公众号搜索神州数码云基地,了解更多技术干货。
Vue源码实现之watcher拾遗
本文紧随《Vue源码分析基础之响应式原理》深入探讨Vue源码中的watcher实现。在阅读前,建议先完成前文的阅读,以便更好地理解后续内容。
Vue源码中的watcher构造函数在参数方面相较于《Vue源码分析基础之响应式原理》所讨论的版本有所不同,增加了两个关键参数:新老依赖deps和newDeps。这两个参数在数据更新时,尤其是渲染watcher的触发中扮演了重要角色。当页面发生更改时,vue会调用渲染watcher,从而重新构建虚拟DOM,这一过程需要解析模板中数据的变化,为模板中使用的data属性建立依赖订阅。然而,当新页面出现后,之前可能依赖某个data属性的模板可能不再使用该属性,此时,需要从该属性的dep.subs中移除渲染watcher,以避免在修改该属性时仍触发页面重新渲染的情况。
以模板代码为例,假设当前show为true,点击toggle时show被改为false,这将触发依赖show变量的渲染watcher的update方法,进而重新构建虚拟DOM和更新真实DOM。在此过程中,show自身dep.subs中的watcher订阅需要被移除。而deps和newDeps正是用于管理这种依赖变化的。
在watcher收集依赖时,通过调用get方法触发依赖的收集。关键代码展示了在调用get方法后,newDeps是如何产生的。通过调用getter去触发依赖的收集,当某个被observe(数据观察)的data属性被读取时,会触发该属性自身对应的依赖对象dep的depend方法。最终,addDep方法将对应属性的dep加入到watcher的newDeps中,同时将自己加入到该dep的subs中,实现了依赖的收集。
构造函数中对getter的操作旨在获取被监控数据的具体属性。在构造函数中调用get方法读取属性时,若设置了Dep.target的标识位,就会触发依赖收集。如果传入的是函数,如渲染watcher初始化时的updateComponent方法,构造函数会将该方法赋值给getter,从而在后续调用get时直接调用该函数,触发依赖收集。
在watcher设置依赖收集标志时,通过pushTarget和popTarget来管理依赖收集的嵌套问题。当开启依赖收集标志时,会将当前watcher压入栈中,并将watcher设置为Dep.target>;当关闭时,从栈顶弹出watcher并将其设置回Dep.target>。这一机制有助于解决依赖收集过程中嵌套watcher时的复杂性,确保正确收集依赖。
综上所述,本文深入探讨了Vue源码中的watcher构造函数参数、依赖收集逻辑及其在依赖嵌套场景中的处理方法,为理解和实现Vue的响应式系统提供了详细解析。
Vue—关于响应式(四、深入学习Vue响应式源码)
Vue的响应式系统是一个关键组成部分,通过深入源码理解,我们可以揭示其内部工作原理。首先,让我们简要回顾下Vue响应式实现的简化过程,然后逐步剖析源码,从响应式系统的初始化到Watcher、Dep和Observer的交互,以及装饰者模式的应用。
响应式系统的初始化涉及Vue实例化后调用_init方法,其中包括初始化props、methods等,核心是observe函数,它会创建Observer类的实例,通过遍历对象属性并调用defineReactive$$1来处理数据,使其变为响应式。
Dep类负责收集依赖,Watcher在数据变化时接收通知并进行更新。Watcher的产生有四种情况,它们会在数据绑定或组件挂载时创建。为了优化性能,Watcher的更新会在事件循环的下一次Tick执行,以避免同步更新带来的性能损耗。
Vue中巧妙地运用了装饰者模式,如对数组原型方法的重写,既保持了数据的响应性,又不改变原对象。在源码中,Observer类不仅处理数据,还负责数组方法的重写,通过copyAugment和def函数实现了这一功能。
总的来说,Vue响应式系统利用Observer、Dep和Watcher的协作,以及装饰者模式的灵活运用,实现了数据的高效、动态更新。深入理解这些原理有助于我们更好地编写和优化Vue应用。
参考资源:Vue官网、VUE源码解析文章、Watcher实现详解等。