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中最常用的继承模式 组合继承
Aug 12 Javascript
jquery.ui.draggable中文文档(原文翻译)
Nov 15 Javascript
在Iframe中获取父窗口中表单的值(示例代码)
Nov 22 Javascript
一个小例子解释如何来阻止Jquery事件冒泡
Jul 17 Javascript
基于bootstrap的选择框插件icheck
Dec 23 Javascript
详解Vue 2.0封装axios笔记
Jun 22 Javascript
javaScript中"=="和"==="的区别详解
Mar 16 Javascript
checkbox在vue中的用法小结
Nov 13 Javascript
vue跳转方式(打开新页面)及传参操作示例
Jan 26 Javascript
如何基于javascript实现贪吃蛇游戏
Feb 09 Javascript
JavaScript实现打砖块游戏
Feb 25 Javascript
vuex管理状态仓库使用详解
Jul 29 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
打造计数器DIY三步曲(上)
2006/10/09 PHP
解析CI即CodeIgniter框架在Nginx下的重写规则
2013/06/03 PHP
深入浅析php中sprintf与printf函数的用法及区别
2016/01/08 PHP
php防止表单重复提交实例讲解
2019/02/11 PHP
Yii redis集合的基本使用教程
2020/06/14 PHP
PHP http请求超时问题解决方案
2020/11/13 PHP
深入理解JavaScript系列(12) 变量对象(Variable Object)
2012/01/16 Javascript
8个超实用的jQuery功能代码分享
2015/01/08 Javascript
AngularJS的内置过滤器详解
2015/05/14 Javascript
element-ui的回调函数Events的用法详解
2018/10/16 Javascript
vue如何实现动态加载脚本
2020/02/05 Javascript
JS数据类型(基本数据类型、引用数据类型)及堆和栈的区别分析
2020/03/04 Javascript
python学习之编写查询ip程序
2016/02/27 Python
Python学习小技巧之列表项的推导式与过滤操作
2017/05/20 Python
VSCode下配置python调试运行环境的方法
2018/04/06 Python
解决Pycharm运行时找不到文件的问题
2018/10/29 Python
python定时检测无响应进程并重启的实例代码
2019/04/22 Python
使用coverage统计python web项目代码覆盖率的方法详解
2019/08/05 Python
win10子系统python开发环境准备及kenlm和nltk的使用教程
2019/10/14 Python
python安装和pycharm环境搭建设置方法
2020/05/27 Python
Python 通过正则表达式快速获取电影的下载地址
2020/08/17 Python
Python字符串的15个基本操作(小结)
2021/02/03 Python
借助HTML5 Canvas API制作一个简单的猜字游戏
2016/03/25 HTML / CSS
Canvas实现放大镜效果完整案例分析(附代码)
2020/11/26 HTML / CSS
英国儿童图书网站:Scholastic
2017/03/26 全球购物
沙龙级头发造型工具:FOXYBAE
2018/07/01 全球购物
Antonioli美国在线商店:时尚前卫奢华
2019/07/29 全球购物
应届毕业生个人自我评价
2013/09/20 职场文书
酒店管理自荐信
2013/10/23 职场文书
入党积极分子思想汇报
2014/01/02 职场文书
小学生感恩演讲稿
2014/04/25 职场文书
社区个人对照检查材料(群众路线)
2014/09/26 职场文书
2014年骨干教师工作总结
2014/12/19 职场文书
2015年妇产科工作总结
2015/05/18 职场文书
中国合伙人观后感
2015/06/02 职场文书
10大幻兽系恶魔果实 蝙蝠果实上榜,第一自愈能力强
2022/03/18 日漫