Vue2源码学习笔记
文章平均质量分 82
配以大量形象的图片,浅显易懂地描述,深入浅出分析学习Vue2源码的各功能模块
小问_
这个作者很懒,什么都没留下…
展开
-
Vue2源码学习笔记 - 20.渲染与编译—createComponent 创建组件VNode
如上所述,函数先处理组件的构造函数,然后整理相关数据,再安装钩子函数,最后创建组件占位 vnode 对象。值得注意的是,这个 vnode 对象并不是实际渲染时 DOM 元素对应的 vnode,正如它的名字一样,它更像是用来占位的。其中的钩子函数在渲染时会创建组件实例,这个后面我们继续研究学习。...原创 2022-08-05 11:23:41 · 938 阅读 · 0 评论 -
Vue2源码学习笔记 - 19.渲染与编译—createElement 函数
函数主要是在调用 render 函数时创建元素的vnode。对于各种类型的子节点在调用 normalizeChildren\simpleNormalizeChildren 规范化扁平化之后存于children属性中。对于HTML\SVG 类标签直接 new VNode 创建,组件则调用 createComponent 创建。最后返回 Vnode 对象或者数组,以供后续渲染操作。...原创 2022-08-04 10:35:54 · 2469 阅读 · 0 评论 -
Vue2源码学习笔记 - 18.渲染与编译—Vnode
VNode 是对真实 DOM 元素和组件标签(Vue组件)元素的一个抽象,它是一个很纯粹的对象数据结构,没有包括任何操作相关方法,这些方法在其他模块中实现。它有很多属性,我们在后续学习渲染的时候会慢慢介绍。......原创 2022-08-03 10:22:31 · 455 阅读 · 0 评论 -
Vue2源码学习笔记 - 17.注册组件
不管是全局注册的Vue.component方法还是局部注册的options.components选项属性,它们底层都是调用的Vue.extend去继承父类(通常是Vue)创建子类构造函数,只是extend的时机不同。全局注册的组件会在Vue.options.components中存储,局部的会在Vue的对象实例vm.$options.components中存储。https。...原创 2022-08-02 10:00:24 · 376 阅读 · 0 评论 -
Vue2源码学习笔记 - 16.响应式原理—更新调度
在任务调度中,本质还是调用nextTick设置下一个调度任务,并在此回调函数中对由Watcher对象组成的队列排序并调用其接口方法run执行必要的操作,比如重新渲染页面和调用侦听属性的回调函数等,总体来说流程比较简单。https。...原创 2022-08-01 11:49:40 · 217 阅读 · 0 评论 -
Vue2源码学习笔记 - 15.响应式原理—nextTick
nextTick函数代码量不大,简而言之它就是设置一个任务(微任务优先,不支持则使用宏任务),在任务被调度执行时执行用户传入的回调函数。httpshttps。原创 2022-07-31 11:31:27 · 218 阅读 · 0 评论 -
Vue2源码学习笔记 - 14.响应式原理—核心本质
这节内容主要从多个不同类型的Watcher为切入点来研究学习Vue的响应式原理,虽然类型不同,但是它们的核心还是不离前面提到的那几个类和函数,比如类,等函数,这些是响应式的核心。因为前面有章节已经详细阐述过,且配有大量形象的图片说明,这节内容有些环节简要带过。如果有什么不明白的地方,请先阅读前面几节内容吧~......原创 2022-07-30 16:59:27 · 358 阅读 · 0 评论 -
Vue2源码学习笔记 - 13.响应式原理—Watcher 类详解
渲染函数,计算属性和侦听属性等都有需要监视变量变动的需求,Watcher正是在这种情况下应运而生,Watcher作为观察者,配合Dep一起组成响应式的核心部件。这个类代码量比较多,我们也花了很多笔墨来研究学习,我觉得这是值得的。接下来我们会把前面学的这些类串起来,学习整个响应式的核心流程与逻辑。...原创 2022-07-29 11:34:23 · 1246 阅读 · 0 评论 -
Vue2源码学习笔记 - 12.响应式原理—Dep 类详解
Dep类对于整个响应式功能模块是非常重要的,它与要实现响应式功能的数据对象和对象属性关联,它只在Observer类构造函数和函数中实例化,并在setter\getter方法中的特定场景下执行依赖收集(执行Dep.depend方法)和派发更新通知(执行Dep.notify方法)。Dep类代码量不大但很重要,它与其他类和模块配合完成响应式的功能,后面我们还会继续研究学习它。httpshttpshttpshttpshttpshttps。...原创 2022-07-28 11:49:11 · 2193 阅读 · 0 评论 -
Vue2源码学习笔记 - 11.响应式原理—Observer 类详解
如图所示,Observer类比较简单,它对数据对象做简单判断然后调用defineReactive把对象属性定义为响应式的属性。它的实例对象是与数据对象关联的,这个关联在后面我们继续会说到。httpshttpshttps。原创 2022-07-27 10:24:11 · 591 阅读 · 0 评论 -
Vue2源码学习笔记 - 10.响应式原理一computed与watch浅析
实例化时传入构造函数中,与此同时,还传入了Watcher的选项配置,其中user选项属性为真,这表示我们实例化了一个用户定义的观察者对象,这个后面在Watcher类详解会细说,这里我们只用知道在这个Watcher对象已经帮我们配置好了侦听属性,它在侦听到属性有变动时会主动调用配置的回调函数即可。从计算属性和侦听属性的初始化流程来看,Watcher是实现这个功能的核心,这个类我们在接下来会研究学习,同时也会继续研究学习计算属性和侦听属性与Watcher的关联与配合工作的细节。...原创 2022-07-26 09:54:14 · 344 阅读 · 0 评论 -
Vue2源码学习笔记 - 9.响应式原理一再看数据对象初始化
对于数据的处理,先proxy代理到vm实列上,这样用户就可以在必要的地方直接通过this.xxx的方式引用。然后调用observe函数做响应式观察处理,可以简单的理解为传入observe函数处理的对象,都具备了响应式的能力,对数据对象的属性的引用this.xxx与修改this.xxx=yyy都会触发某些处理,这个我们后续章节继续研究学习。https。...原创 2022-07-25 10:19:24 · 487 阅读 · 0 评论 -
Vue2源码学习笔记 - 8.响应式原理一def、proxy及defineReactive函数
这一节我们简单研究学习def、proxy和defineReactive函数的实现原理。def只是简单的给数据对象定义属性值;proxy实现了this._data.xxx到this.xxx的代理;defineReactive则实现了数据的响应式,getter中收集依赖,setter中通知依赖。它们的底层核心都是依靠调用Object.defineProperty修改配置属性的getter/setter来实现。https。...原创 2022-07-24 21:25:39 · 1198 阅读 · 0 评论 -
Vue2源码学习笔记 - 7.响应式原理一基础
这一节我们大概学习下响应式底层调用的核心方法Object.defineProperty和Proxy类,它们虽然不同,但是无非都是在更新和引用的时候触发特点的方法setter/getter,似乎也可以称为钩子方法,在执行这些方法时去做一些希望的操作来实现响应式。下一篇我们继续深入Vue的响应式实现。httpshttpshttpshttps。......原创 2022-07-23 10:04:53 · 389 阅读 · 2 评论 -
Vue2源码学习笔记 - 6.实例的挂载渲染
简而言之,在这个环节Vue就是把模板编译成render渲染函数,然后newWatcher实例化一个Watcher对象,在这个对象中调用updateComponent执行首次渲染。这个Watcher对象很特别,它还会在依赖的响应式数据变动时收到事件通知,然后又会去调用updateComponent重复渲染,如此反复循环不息。这个_update和_render在后面章节我们会详细研究学习,这里我们先只熟悉挂载渲染的整个流程即可。httpshttps。...原创 2022-07-22 11:09:45 · 344 阅读 · 0 评论 -
Vue2源码学习笔记 - 5.options选项合并
这里我们主要详细学习newVue应用实例化的选项合并策略,简而言之就是合并Vue.options与newVue(options)中的options为新的选项对象并保存在实例vm的$options属性上。合并的具体策略是函数mergeField调用strats中定义的合并函数并返回,如上图所示。组件的选项合并分了两个阶段,我们在学习组件的相关知识点时在详细介绍。https。...原创 2022-07-21 10:37:24 · 521 阅读 · 0 评论 -
Vue2源码学习笔记 - 4.new Vue应用实例化
在上一节我们已经学习了 Vue 的类是如何定义的,这一节我们来学习一下 Vue 的实例化,就是我们经常写的创建 Vue 应用 new Vue。我们先在这里学习应用实例化创建的大致过程,对于过程中的诸多细节,我们后续慢慢研读。从 Vue 的定义我们知道,Vue 在 new 的时候只调用了一个动态方法,那就是 _init。我们来看看这个 _init,它紧跟在定义 Vue 构造函数之后通过调用 initMixin(Vue) 被定义到 Vue 的原型上,它的源码在 /src/core/instance/init.原创 2022-07-20 09:38:11 · 314 阅读 · 0 评论 -
Vue2源码学习笔记 - 3.Vue类的定义
在第一篇 前置准备 章节我们新建了一个 HTML 文件,里面引用并构建了一个简单的 Vue 应用。构建一个 Vue 应用是通过 new Vue 一个对象开始的,这一节我们先来看看 Vue 类是怎样定义的,以方便我们后续的学习。......原创 2022-07-19 16:18:42 · 1156 阅读 · 0 评论 -
Vue2源码学习笔记 - 2.构建Vue
在上一篇的 index.html 中我们引用了 /vue/dist/vue.js 来构建一个应用,这个 vue.js 是 Vue 使用 rollup 来打包生成的,在源码目录中可以根据 package.json 文件的 scripts 字段查看 Vue 的构建命令。原创 2022-07-18 16:46:56 · 295 阅读 · 0 评论 -
Vue2源码学习笔记 - 1.前置准备
这是Vue2源码分析学习笔记系列第一节,本笔记系列文章,我主要以 UMD 完整版的 Vue为主来学习,UMD 版可以通过 标签直接用在浏览器中,而完整版是同时包含编译器和运行时的版本,这样就便于我们直接修改代码打印一些调试信息和编译模板。...原创 2022-07-08 17:13:50 · 266 阅读 · 0 评论