vue源码解析图（vue源码分析视频教程）

今天给各位分享vue源码解析图的知识，其中也会对vue源码分析视频教程进行解释，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在开始吧！

本文目录一览：

• 1、vue-lazyload 源码解析
• 2、Vue源码系列之生命钩子beforeCreate&created
• 3、面试中的网红Vue源码解析之虚拟DOM，你知多少呢？深入解读diff算法
• 4、vue源码分析三 -- vm._render()如何生成虚拟dom

vue-lazyload 源码解析

/src/lazy.js

定义变量接收实例化参数。

lazy.js 默认导出一个函数，该函数返回一个 Lazy 类，形成闭包，保持对 Vue 的引用。

判断是否支持Webp图片

/src/listener.js

定义变量接收实例化参数。

filter 方法将配置的 filter 对象中的方法执行，接收两个参数，一个为 ReactiveListener 实例，一个为 options 参数对象。

initState 方法给元素添加 data-set 属性，值为图片地址 src，并且定义了图片状态对象 state 。在 Lazy 中已经根据像素比选择了最适配屏幕的图片，顾这里不需要考虑 srcset 属性。另外，我们自定义指令是 v-lazy，到目前为止，还没有给图片的 src 属性赋值。

render 方法，是在 Lazy 中实例化 ReactiveListener 时传递过来的参数。

回过头再来结合 lazy.js 中的 lazyLoadHandler 方法与 ReactiveListener 暴露的方法来看。

/src/lazy-container.js

LazyContainer 的核心是 container 下的选择器selector(默认 img 标签)遍历后调用 lazy 的 add 方法进行绑定，自定义指令 v-lazyload-container。

/src/lazy-component.js

上述实现元素绑定主要是通过自定义指令 v-lazy ， v-lazy-container 。那么 LazyComponent 则是通过注册的 lazy-component 组件，完成绑定，默认渲染成为 div 标签，作为 img 的容器。

/src/lazy-image.js

通 LazyComponent 组件，只不过 LazyImage 注册的 lazy-image 组件，渲染成的是 img 标签，多了 src 属性。

通过自定义指令 v-lazy 将设置背景图的元素或者 img元素，通过 _addListenerTarget 方法收集与数组 TargetQueue 中，并遍历触发懒加载的方法， addEventListener 绑定在该元素上，触发的事件为 lazyLoadHandler ；

在需要懒加载的元素上设置属性 data-src ，这是期望的图片地址(filter 配置项可以预先过滤赋值)，元素上自定义 lazyLoad 表示图片状态(状态变更后，adapter 中触发回调)；

ListenerQueue 数组中收集的是 ReactiveListener 类的实例，主要是用于懒加载不同状态下的图片加载，loading - loaded - error；

当触发 EventListener 了，执行 lazyLoadHandler 方法，根据算法，进入 viewport 后， ReactiveListener 元素如果与触发元素匹配，则进行图片的加载及渲染。

Vue源码系列之生命钩子beforeCreate&created

在实习面试中，Vue相关被问到最多的就是围绕生命周期函数内部所作的一些操作，很多朋友可能了解的就是官网的下图，有时候倒霉遇上硬核点的面试官，深入问些东西就会被怼的哑口无言，本文就是在之前源码的基础上，分析一下，生命周期函数究竟发生了什么

先上图

在分析每个钩子之间究竟干了什么之前，先来看看钩子是怎么触发的，以第一个钩子为例

调用callHook函数并向其传入this和'beforeCreate'字符串，那来看看callHook函数究竟是何方神圣

注意到，该函数一开始，也就是钩子函数进入准备触发前，进行了一个pushTarget()的操作，注释写的是“在钩子函数触发时，禁用依赖收集”，那这个操作是干嘛呢

言归正传，禁用了依赖收集后，创建handlers数组存入合并后options的hook，本例中就是找自定义或者继承来的beforeCreate钩子，然后在invokeWithErroeHandling函数中以此触发，顺序是先触发父级，后自己定义的

而这个invokeWithErroeHandling函数如下

该函数直接就在内部call了钩子，所以钩子内部的this指向vm实例

以上就是钩子函数的触发过程，下面来看不同的生命周期之间究竟干了什么

beforeCreate之前

beforeCreate之后到created

1.对于props：合法化，缓存key进数组方便下次迭代，defineReactive

2.对于data：检验props，methods中是否有重名属性，defineReactive

3.对于methods：代理到vm实例上，方便使用this.method.name调用

4.对于computed：封装成watcher并用该watcher的value缓存该计算属性的value，再在每个计算属性上劫持一层getter和setter，在第一次调用getter的时候，取得最新的value，并将依赖缓存下来，之后再依赖不变的前提下，getter只返回watcher的value而不是又去取一遍值，再依赖发生变化的时候，通知watcher更新，watcher取的最新值作为value，从而实现依赖更新计算属性才更新

5.对于watch：调用$watch封装成一个user watcher，如果有immediate options传入，就在封装的时候就调用一遍callback，有deep options传进来的话就将该属性的所有嵌套属性记为依赖

beforeCreate之前主要是做准备工作，将该实例的options合并整理出来，再把$那些初始话

created之前就是对options做操作，data，props设置数据劫持，methods代理在vm实例上，computed，watch封装成不同类型的watcher

面试中的网红Vue源码解析之虚拟DOM，你知多少呢？深入解读diff算法

众所周知，在前端的面试中，面试官非常爱考dom和diff算法。比如，可能会出现在以下场景

滴滴滴，面试官发来一个面试邀请。接受邀请?

我们都知道， key 的作用在前端的面试是一道很普遍的题目，但是呢，很多时候我们都只浮于知识的表面，而没有去深挖其原理所在，这个时候我们的竞争力就在这被拉下了。所以呢，深入学习原理对于提升自身的核心竞争力是一个必不可少的过程。

在接下来的这篇文章中，我们将讲解面试中很爱考的虚拟DOM以及其背后的diff算法。 请认真阅读本文～文末有学习资源免费共享！！！

虚拟DOM是用JavaScript对象描述DOM的层次结构。DOM中的一切属性都在虚拟DOM中有对应的属性。本质上是JS 和 DOM 之间的一个映射缓存。

要点：虚拟 DOM 是 JS 对象；虚拟 DOM 是对真实 DOM 的描述。

diff发生在虚拟DOM上。diff算法是在新虚拟DOM和老虚拟DOM进行diff（精细化比对），实现最小量更新，最后反映到真正的DOM上。

我们前面知道diff算法发生在虚拟DOM上，而虚拟DOM是如何实现的呢？实际上虚拟DOM是有一个个虚拟节点组成。

h函数用来产生虚拟节点（vnode）。虚拟节点有如下的属性：

1）sel： 标签类型，例如 p、div；

2）data： 标签上的数据，例如 style、class、data-*；

3）children ：子节点；

4） text： 文本内容；

5）elm：虚拟节点绑定的真实 DOM 节点；

通过h函数的嵌套，从而得到虚拟DOM树。

我们编写了一个低配版的h函数，必须传入3个参数，重载较弱。

形态1：h('div', {}, '文字')

形态2：h('div', {}, [])

形态3：h('div', {}, h())

首先定义vnode节点，实际上就是把传入的参数合成对象返回。

[图片上传失败...(image-7a9966-1624019394657)]

然后编写h函数，根据第三个参数的不同进行不同的响应。

当我们进行比较的过程中，我们采用的4种命中查找策略：

1）新前与旧前：命中则指针同时往后移动。

2）新后与旧后：命中则指针同时往前移动。

3）新后与旧前：命中则涉及节点移动，那么新后指向的节点，移到 旧后之后 。

4）新前与旧后：命中则涉及节点移动，那么新前指向的节点，移到 旧前之前 。

命中上述4种一种就不在命中判断了，如果没有命中，就需要循环来寻找，移动到旧前之前。直到while(新前=新后旧前=就后)不成立则完成。

如果是新节点先循环完毕，如果老节点中还有剩余节点(旧前和旧后指针中间的节点)，说明他们是要被删除的节点。

如果是旧节点先循环完毕，说明新节点中有要插入的节点。

1.什么是Virtual DOM 和Snabbdom

2.手写底层源码h函数

3.感受Vue核心算法之diff算法

4.snabbdom之核心h函数的工作原理

1、零基础入门或者有一定基础的同学、大中院校学生

2、在职从事相关工作1-2年以及打算转行前端的朋友

3、对前端开发有兴趣人群

vue源码分析三 -- vm._render()如何生成虚拟dom

我们在上一篇的最后讲解了vm._render是生成虚拟dom的关键，那么我们来看看他是如何生成的，下面是他的源码

createElement在文件../vdom/create-element里面，下面是他的源码

new Vnode 创建的是一个虚拟dom，其实就是一个装有很多属性的对象，和真实的dom做一个映射，目的是去渲染真实的dom，那么为什么不直接去渲染dom，因为vue中dom不仅有create的过程，还有diff,patch的过程。为了使得diff的过程花费的时间更短，虚拟dom就出来了，下面我们来看看new Vnode的源码

vue源码解析图的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于vue源码分析视频教程、vue源码解析图的信息别忘了在本站进行查找喔。