Vue使用虚拟dom进行渲染view的方法


Posted in Javascript onDecember 26, 2019

前提

vue版本:v2.5.17-beta.0

触发render

vue在数据更新后会自动触发view的render工作,其依赖于数据驱动;在数据驱动的工作下,每一个vue的data属性都被监听,并且在set触发时,派发事件,通知收集到的依赖,从而触发对应的操作,render工作就是其中的一个依赖,并且被每一个data属性所收集,因此每一个data属性改变后,都会触发render。

vue更新监听

看一段代码

// 来自mountComponent函数
updateComponent = function () {
 vm._update(vm._render(), hydrating);
};

new Watcher(vm, updateComponent, noop, {
 before: function before () {
 if (vm._isMounted) {
  callHook(vm, 'beforeUpdate');
 }
 }
}, true /* isRenderWatcher */);

updateComponent是更新组件的函数,内部调用vm._update,并且传参vm._render();

  • vm._render()返回了什么?看源码则得知返回了虚拟dom(VNode)
  • vm._update函数又做了什么事情?顾名思义,更新传入的vnode
  • 什么时候触发updateComponent函数?在任何vue的data属性更改值都会触发

更新view

阅读_update函数得知,最终调用了vm.__patch__方法,最终找到为createPatchFunction方法的返回值

var patch = createPatchFunction({ nodeOps: nodeOps, modules: modules });

Vue.prototype.__patch__ = inBrowser ? patch : noop;

接下来重点看createPatchFunction的返回函数patch.

如果新的vnode不存在,则注销旧的vnode

if (isUndef(vnode)) {
 if (isDef(oldVnode)) { invokeDestroyHook(oldVnode); }
 return
}

如果旧的vnode不存在,则创建新的vnode

if (isUndef(oldVnode)) {
 // empty mount (likely as component), create new root element
 isInitialPatch = true;
 createElm(vnode, insertedVnodeQueue);
}

如果以上不成立,则新的vnode和oldVnode都存在.如果oldVnode不是真实的dom,则为虚拟dom节点,并且新老vnode相似,则进行diff算法

var isRealElement = isDef(oldVnode.nodeType);
if (!isRealElement && sameVnode(oldVnode, vnode)) {
 // patch existing root node
 patchVnode(oldVnode, vnode, insertedVnodeQueue, removeOnly);
}

如果新老vnode不同,则拿到oldVnode的父节点,辅助创建vnode的新节点

var oldElm = oldVnode.elm;
var parentElm = nodeOps.parentNode(oldElm);

// create new node
createElm(
 vnode,
 insertedVnodeQueue,
 // extremely rare edge case: do not insert if old element is in a
 // leaving transition. Only happens when combining transition +
 // keep-alive + HOCs. (#4590)
 oldElm._leaveCb ? null : parentElm,
 nodeOps.nextSibling(oldElm)
);

以上的步骤发现,更新view时,重点进入到了patchVnode函数,因此下面进入patchVnode的函数阅读

如果新老node相等,则不做处理

if (oldVnode === vnode) {
 return
}

如果vnode不是文本节点则有几种情况

if (isDef(oldCh) && isDef(ch)) {
 // 如果oldVnode和vnode的children都有值(组件层),并且不想等,则执行更新children流程
 if (oldCh !== ch) { updateChildren(elm, oldCh, ch, insertedVnodeQueue, removeOnly); }
} else if (isDef(ch)) {
 // 如果vnode的children有值,如果当前dom有文本则清空,
 // 并将oldVnode的dom作为父节点,创建新vnode的children节点
 if (isDef(oldVnode.text)) { nodeOps.setTextContent(elm, ''); }
 addVnodes(elm, null, ch, 0, ch.length - 1, insertedVnodeQueue);
} else if (isDef(oldCh)) {
 // 如果oldVnode存在children,但是新的没有,则删除oldVnode的children的vnode
 removeVnodes(elm, oldCh, 0, oldCh.length - 1);
} else if (isDef(oldVnode.text)) {
 // 如果oldVnode有文本信息,则将dom的文本清空
 nodeOps.setTextContent(elm, '');
}

如果vnode是文本节点, 则当新老节点文本不同,将dom的文本更新成新vnode的文本

else if (oldVnode.text !== vnode.text) {
 nodeOps.setTextContent(elm, vnode.text);
}

patchVnode函数处理的情况梳理一下则为:

  • 如果新老vnode相同,不作处理
  • 如果新vnode是文本节点,并且新老文本不同,将dom更新为vnode的文本
  • 如果新老vnode都有children,表示他们是组件层,则调用updateChildren去做组件层更新
  • 如果新vnode是组件层,oldVnode不是,则将当前dom添加新vnode组件的子元素
  • 如果oldVnode是组件层,新vnode不是,则操作dom,将oldVnode包含的子元素删除
  • 如果新vnode是组件层,oldVnode是文本节点,则将dom的文本清空

在patchVnode部分又浮现了一个新的函数:updateChildren,是在新老vnode都不是文本节点时调用的,这里就是vue的渲染机制的核心

updateChildren

updateChildren中将新老vnode的children进行的循环处理,每一次循环去判断是否有相同的vnode,如果没有则查找当前新vnode的子节点的key是否存在oldVnode的children中,如果不存在在这存在但已经不相同则创建新的dom,否则,如果是新老节点相同,回调patchVnode函数去处理2个节点。 这样进行了递归处理,组件层的更新就完成了。

结尾

本文为看源码分析vue更新机制部分,省略了特殊场景的源码分析,比如ssr、静态组件等。

总结

以上所述是小编给大家介绍的Vue使用虚拟dom进行渲染view的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
用js+xml自动生成表格的东西
Dec 21 Javascript
javascript 放大镜效果js组件 qsoft.PopBigImage.v0.35 加入了chrome支持
Apr 07 Javascript
了解jQuery技巧来提高你的代码(个人觉得那个jquery的手册很不错)
Feb 10 Javascript
Javascript脚本实现静态网页加密实例代码
Nov 05 Javascript
基于JQuery实现的Select级联
Jan 27 Javascript
解决json日期格式问题的3种方法
Feb 02 Javascript
关于Vue实现组件信息的缓存问题
Aug 23 Javascript
vue1.0和vue2.0的watch监听事件写法详解
Sep 11 Javascript
jQuery easyui datagird编辑行删除行功能的实现代码
Sep 20 jQuery
解决vue移动端适配问题
Dec 12 Javascript
简单了解vue中父子组件如何相互传递值(基础向)
Jul 12 Javascript
layui点击弹框页面 表单请求的方法
Sep 21 Javascript
node.js Promise对象的使用方法实例分析
Dec 26 #Javascript
js回调函数仿360开机
Dec 26 #Javascript
js仿360开机效果
Dec 26 #Javascript
element-ui中按需引入的实现
Dec 25 #Javascript
原生JS实现顶部导航栏显示按钮+搜索框功能
Dec 25 #Javascript
jQuery+PHP+Ajax实现动态数字统计展示功能
Dec 25 #jQuery
解决Vue 刷新页面导航显示高亮位置不对问题
Dec 25 #Javascript
You might like
jquery控制左右箭头滚动图片列表的实例
2013/05/20 Javascript
jQuery中验证表单提交方式及序列化表单内容的实现
2014/01/06 Javascript
JavaScript数组深拷贝和浅拷贝的两种方法
2014/04/16 Javascript
jQuery限制图片大小的方法
2016/05/25 Javascript
TinyMCE汉化及本地上传图片功能实例详解
2016/05/31 Javascript
jQuery实现字符串全部替换的方法
2016/12/12 Javascript
JavaScript你不知道的一些数组方法
2017/08/18 Javascript
for循环 + setTimeout 结合一些示例(前端面试题)
2017/08/30 Javascript
jQuery UI 实例讲解 - 日期选择器(Datepicker)
2017/09/18 jQuery
基于jQuery选择器之表单对象属性筛选选择器的实例
2017/09/19 jQuery
微信小程序wx.request实现后台数据交互功能分析
2017/11/25 Javascript
JS编写兼容IE6,7,8浏览器无缝自动轮播
2018/10/12 Javascript
Element Table的row-class-name无效与动态高亮显示选中行背景色
2018/11/30 Javascript
解决vue项目中某一页面不想引用公共组件app.vue的问题
2020/08/14 Javascript
Python中自定义函数的教程
2015/04/27 Python
详解python之heapq模块及排序操作
2019/04/04 Python
Python中使用logging和traceback模块记录日志和跟踪异常
2019/04/09 Python
如何使用pyinstaller打包32位的exe程序
2019/05/26 Python
django 使用全局搜索功能的实例详解
2019/07/18 Python
python KNN算法实现鸢尾花数据集分类
2019/10/24 Python
Python中如何添加自定义模块
2020/06/09 Python
Python实现钉钉/企业微信自动打卡的示例代码
2021/02/02 Python
用html5绘制折线图的实例代码
2016/03/25 HTML / CSS
娇韵诗香港官网:Clarins香港
2020/08/13 全球购物
大学毕业通用个人的求职信
2013/12/08 职场文书
预备党员党课思想汇报
2014/01/13 职场文书
公务员转正考察材料
2014/02/07 职场文书
厕所文明标语
2014/06/11 职场文书
2015年爱牙日活动总结
2015/02/05 职场文书
2016感恩母亲节校园广播稿
2015/12/17 职场文书
观看《杨善洲》宣传教育片心得体会
2016/01/23 职场文书
2019年怎样写好导游词?
2019/07/02 职场文书
纯CSS实现hover图片pop-out弹出效果的实例代码
2021/04/16 HTML / CSS
MySQL七种JOIN类型小结
2021/10/24 MySQL
mysql分组后合并显示一个字段的多条数据方式
2022/01/22 MySQL
PostgreSQL怎么创建分区表详解
2022/06/25 PostgreSQL