今天给各位分享vue虚拟Dom的原理的知识,其中也会对vue中虚拟dom原理进行解释,如果能碰巧解决你现在面临的问题,别忘了关注本站,现在开始吧!
本文目录一览:
vue渲染虚拟dom树原理
1、判断是否有render函数,如果有,直接将render函数返回结果作为虚拟节点树;如果没有,看有没有template配置
2、如果有template配置,将template作为模板 编译为render函数;如果没有则看el配置的outerHTML作为模板
render函数:
a、render 函数的参数(createElement)
createElement 是 render 函数 的参数,它本身也是个函数,并且有三个参数。
b、createElement 函数的参数(三个)
(1)一个 HTML 标签字符串,组件选项对象,或者解析上述任何一种的一个 async 异步函数。类型:{String | Object | Function}。必需。
(2)一个包含模板相关属性的数据对象你可以在 template 中使用这些特性。类型:{Object}。可选。
(3)子虚拟节点 (VNodes),由 createElement() 构建而成,也可以使用字符串来生成“文本虚拟节点”。类型:{String | Array}。可选。
例子:
var vm= new Vue({
el:"#app",
data:{
author:“web小王子”
}
render(h){
h("h1",[h("h1",
{
props: {
someProp: 'foobar' }
},
`第1个vue应用,作者${this.author}`)])
}
})
Vue原理解析(五):彻底搞懂虚拟Dom到真实Dom的生成过程
再有一棵树形结构的 JavaScript 对象后,我们现在需要做的就是将这棵树跟真实的 Dom 树形成映射关系,首先简单回顾之前遇到的 mountComponent 方法:
我们已经执行完了 vm._render 方法拿到了 VNode ,现在将它作为参数传给 vm._update 方法并执行。 vm._update 这个方法的作用就是就是将 VNode 转为真实的 Dom ,不过它有两个执行的时机:
我们现在先来看下 vm._update 方法的定义:
这里的 vm.$el 是之前在 mountComponent 方法内就挂载的,一个真实 Dom 元素。首次渲染会传入 vm.$el 以及得到的 VNode ,所以看下 vm.__patch__ 定义:
__patch__ 是 createPatchFunction 方法内部返回的一个方法,它接受一个对象:
nodeOps 属性:封装了操作原生 Dom 的一些方法的集合,如创建、插入、移除这些,再使用到的地方再详解。
modules 属性:创建真实 Dom 也需要生成它的如 class / attrs / style 等属性。 modules 是一个数组集合,数组的每一项都是这些属性对应的钩子方法,这些属性的创建、更新、销毁等都有对应钩子方法,当某一时刻需要做某件事,执行对应的钩子即可。比如它们都有 create 这个钩子方法,如将这些 create 钩子收集到一个数组内,需要在真实 Dom 上创建这些属性时,依次执行数组的每一项,也就是依次创建了它们。
这里大家记住一句话即可,无论 VNode 是什么类型的节点,只有三种类型的节点会被创建并插入到的 Dom 中:元素节点、注释节点、和文本节点。
我们接着来看下 createPatchFunction 它究竟返回一个什么样的方法:
首次渲染时没有 oldVnode , oldVnode 就是 $el ,一个真实的 dom ,经过 emptyNodeAt(oldVnode) 方法包装:
再将传入的 $el 属性转为了 VNode 格式之后,我们继续:
createElm 方法开始生成真实的 Dom , VNode 生成真实的 Dom 的方式还是分为元素节点和组件两种方式,所以我们使用上一章生成的 VNode 分别说明。
大家可以先看下这个流程图有一个印象即可,接下来再看具体实现时相信思路会清晰很多:
开始创建 Dom ,我们来看下它的定义:
依次判断是否是元素节点、注释节点、文本节点,分别创建它们然后插入到父节点里面,这里主要介绍创建元素节点,另外两个并没有复杂的逻辑。我们来看下 createChild 方法定义:
开始创建子节点,遍历 VNode 的每一项,每一项还是使用之前的 createElm 方法创建 Dom 。如果某一项又是数组,继续调用 createChild 创建某一项的子节点;如果某一项不是数组,创建文本节点并将它添加到父节点内。像这样使用递归的形式将嵌套的 VNode 全部创建为真实的 Dom 。
再看一遍流程图,相信大家疑惑已经减少很多:
首先还是看张简易流程图,留个印象即可,方便理清之后的逻辑顺序:
执行 createComponent 方法,如果是元素节点不会返回任何东西,所以是 undefined ,会继续走接下来的创建元素节点的逻辑。现在是组件,我们看下 createComponent 的实现:
首先会将组件的 vnode.data 赋值给 i ,是否有这个属性就能判断是否是组件 vnode 。之后的 if(isDef(i = i.hook) isDef(i = i.init)) 集判断和赋值为一体, if 内的 i(vnode) 就是执行的组件 init(vnode) 方法。这个时候我们来看下组件的 init 钩子方法做了什么:
activeInstance 是一个全局的变量,再 update 方法内赋值为当前实例,再当前实例做 __patch__ 的过程中作为子组件的父实例传入,在子组件的 initLifecycle 时构建组件关系。将 createComponentInstanceForVnode 执行的结果赋值给了 vnode.componentInstance ,所以看下它的返回的结果是什么:
再组件的 init 方法内首先执行 createComponentInstanceForVnode 方法,这个方法的内部就会将子组件的构造函数实例化,因为子组件的构造函数继承了基类 Vue 的所有能力,这个时候相当于执行 new Vue({...}) ,接下来又会执行 _init 方法进行一系列的子组件的初始化逻辑,我们回到 _init 方法内,因为它们之间还是有些不同的地方:
前面都还执行的好好的,最后却因为没有 el 属性,所以没有挂载, createComponentInstanceForVnode 方法执行完毕。这个时候我们回到组件的 init 方法,补全剩下的逻辑:
我们在 init 方法内手动挂载这个组件,接着又会执行组件的 _render() 方法得到组件内元素节点 VNode ,然后执行 vm._update() ,执行组件的 __patch__ 方法,因为 $mount 方法传入的是 undefined , oldVnode 也是 undefined ,会执行 __patch__ 内的这段逻辑:
这次执行 createElm 时没有传入第三个参数父节点的,那组件创建好的 Dom 放哪生效了?没有父节点也要生成 Dom 不是,这个时候执行的是组件的 __patch__ ,所以参数 vnode 就是组件内元素节点的 vnode 了:
很明显这个时候不是组件了,即使是组件也没关系,大不了还是执行一遍 createComponent 创建组件的逻辑,因为总会有组件是由元素节点组成的。这个时候我们执行一遍创建元素节点的逻辑,因为没有第三个参数父节点,所以组件的 Dom 虽然创建好了,并不会在这里插入。请注意这个时候组件的 init 已经完成,但是组件的 createComponent 方法并没有完成,我们补全它的逻辑:
无论是嵌套多么深的组件,遇到组件的后就执行 init ,在 init 的 __patch__ 过程中又遇到嵌套组件,那就再执行嵌套组件的 init ,嵌套组件完成 __patch__ 后将真实的 Dom 插入到它的父节点内,接着执行完外层组件的 __patch__ 又插入到它的父节点内,最后插入到 body 内,完成嵌套组件的创建过程,总之还是一个由里及外的过程。
再回过头来看这张图,相信会好理解很多~
接下来会将 updateComponent 传入到一个 Watcher 的类中,这个类是干嘛的,我们下一章再说明,接下来执行 mounted 钩子方法。至此 new Vue 的整个流程就全部走完了。我们回顾下从 new Vue 开始它的执行顺序:
最后我们还是以一道 vue 可能会被问到的面试题作为本章的结束吧~
顺手点个赞或关注呗,找起来也方便~
你可能会用的上的一个vue功能组件库,持续完善中...
面试中的网红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虚拟Dom的原理和vue中虚拟dom原理的介绍到此就结束了,不知道你从中找到你需要的信息了吗 ?如果你还想了解更多这方面的信息,记得收藏关注本站。
2、本站永久网址:https://www.yuanmacun.com
3、本网站的文章部分内容可能来源于网络,仅供大家学习与参考,如有侵权,请联系站长进行删除处理。
4、本站一切资源不代表本站立场,并不代表本站赞同其观点和对其真实性负责。
5、本站一律禁止以任何方式发布或转载任何违法的相关信息,访客发现请向站长举报
6、本站资源大多存储在云盘,如发现链接失效,请联系我们我们会第一时间更新。
源码村资源网 » vue虚拟Dom的原理(vue中虚拟dom原理)