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 相关文章推荐
javascript 进阶篇1 正则表达式,cookie管理,userData
Mar 14 Javascript
通过action传过来的值在option获取进行验证的方法
Nov 14 Javascript
js中将String转换为number以便比较
Jul 08 Javascript
JavaScript中的style.cssText使用教程
Nov 06 Javascript
推荐10 款 SVG 动画的 JavaScript 库
Mar 24 Javascript
Javascript BOM学习小结(六)
Nov 26 Javascript
日常收集整理的JavaScript常用函数方法
Dec 10 Javascript
实例讲解JavaScript的Backbone.js框架中的View视图
May 05 Javascript
使用bootstrapValidator插件进行动态添加表单元素并校验
Sep 28 Javascript
Bootstrap导航简单实现代码
Mar 06 Javascript
ES6学习之变量的两种命名方法示例
Jul 18 Javascript
JS pushlet XMLAdapter适配器用法案例解析
Oct 16 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
PHP函数学习之PHP函数点评
2012/07/05 PHP
新手菜鸟必读:session与cookie的区别
2013/08/22 PHP
使用php的HTTP请求的库Requests实现美女图片墙
2015/02/22 PHP
php实现屏蔽掉黑帽SEO的搜索关键字
2015/04/15 PHP
Javascript 文件夹选择框的两种解决方案
2009/07/01 Javascript
让ie运行js时提示允许阻止内容运行的解决方法
2010/10/24 Javascript
关于jquery性能最佳实践的讨论,与求教
2012/03/30 Javascript
JS JQUERY实现滚动条自动滚到底的方法
2015/01/09 Javascript
JavaScript改变CSS样式的方法汇总
2015/05/07 Javascript
jQuery实现多级联动下拉列表查询框
2016/01/18 Javascript
jQuery简单实现中间浮窗效果
2016/09/04 Javascript
jquery+css3问卷答题卡翻页动画效果示例
2016/10/26 Javascript
React操作真实DOM实现动态吸底部的示例
2017/10/23 Javascript
ES6中字符串string常用的新增方法小结
2017/11/07 Javascript
vue基于mint-ui实现城市选择三级联动
2020/06/30 Javascript
React中使用外部样式的3种方式(小结)
2019/05/28 Javascript
node.js中 mysql 增删改查操作及async,await处理实例分析
2020/02/11 Javascript
python基础while循环及if判断的实例讲解
2017/08/25 Python
Python数据分析库pandas基本操作方法
2018/04/08 Python
PyCharm 创建指定版本的 Django(超详图解教程)
2019/06/18 Python
python3.x提取中文的正则表达式示例代码
2019/07/23 Python
CSS3中HSL和HSLA的简单使用示例
2015/07/14 HTML / CSS
世界上最大的在线旅行社新加坡网站:Expedia新加坡
2016/08/25 全球购物
美体小铺加拿大官方网站:The Body Shop加拿大
2016/10/30 全球购物
英国顶尖手表珠宝品牌独家授权经销商:HS Johnson
2020/10/28 全球购物
园长自我鉴定
2013/10/06 职场文书
测绘工程个人的自我评价
2013/11/10 职场文书
教师研修随笔感言
2014/01/23 职场文书
实习生岗位职责
2014/04/12 职场文书
公司投资建议书
2014/05/16 职场文书
工会主席事迹材料
2014/06/03 职场文书
我心目中的好老师活动方案
2014/08/19 职场文书
网络营销计划
2015/01/17 职场文书
2015年高校教师个人工作总结
2015/05/25 职场文书
二婚主持词
2015/06/30 职场文书
七一慰问简报
2015/07/20 职场文书