Vue源码分析-update


_update方法挂载在vue原型上,调用的时机有两个,一个是首次渲染的时候把我们的vnode映射成虚拟dom,另一个就是我们改变数据的时候,数据改变驱动视图的变化,同样也会调用_update
初始化渲染的时候调用vm.__patch__
在这里插入图片描述
因为vue也可以运行在服务端,是没有dom的。如果是浏览器环境就调用patch方法否则就是空函数,
在这里插入图片描述

patch方法里面调用createPatchFunction,参数nodeOps是我们一些操作dom的方法,
在这里插入图片描述
参数modulesplatformModulesbaseModules的concat的合集,这个里面定义了很多类的钩子函数,在patch过程中会调用不同模块的钩子函数
在这里插入图片描述
在这里插入图片描述
createPatchFunction就是在里面调用不同模块的钩子函数
在这里插入图片描述
中间还定义了很多辅助函数,最后返回了一个patch函数,所以我们调用vm._patch的时候实际上是调用的createPatchFunction中返回的patch方法,Vue为什么要绕了一大圈把patch方法定义在这里,其实用到了函数柯里化的技巧。createPatchFunction调用传入的参数是与跨平台有关的,vue可以运行的webweex平台,调用的domapi是不一样的,所以分离作为参数nodeOps传入,另外一个就是modules,这些模块不同的生命周期要做的事情,怎么去生成的模块和dom做配合这些也是和平台相关的,用函数柯里化的技巧把参数一次传入,就不用判断平台的差异,因为之前已经抹平了。相当于利用了闭包的技巧实现了nodeOps和modules的持有。
在这里插入图片描述patch方法中判断oldValue.nodeType是不是一个真实的dom
,因为我们不是服务端渲染,所以最后走到了oldVnode = emptyNodeAt(oldVnode),
在这里插入图片描述
emptyNodeAt把我们真实的dom转成一个vnode
在这里插入图片描述
在这里插入图片描述

oldElm是id为app的div,那么parentElm就是body,接下来createElm是一个很重要的函数,它的在作用就是把vnode挂载到真实的dom上
在这里插入图片描述
折叠起来的判断走不到,后面判断tag是不是未知的元素,如果是就报警告 Unknown custom element:<xxx> did you ...
在这里插入图片描述
在这里插入图片描述
vnodeelemenet如果有命名空间就调用命名空间的创建createElementNS方法,否则直接调用createElement创建,
在这里插入图片描述
平台的判断可以不用看,如果你的vnodechildren还是vnode接下来创建子节点
在这里插入图片描述
createChildren
遍历vnode,判断children是不是array类型,递归调用createEle,然后把当前节点作为父节点插入,如果就是普通的文本节点,nodeOps直接调用appendChild添加进来。
在这里插入图片描述
最终调用insert方法插入节点
在这里插入图片描述
insert辅助方法,判断参考节点ref的父节点和parent是不是下相等,从而调用insertBeforeappendChild方法
在这里插入图片描述
在这里插入图片描述
如果这里定义了parentElm,那就要把之前的节点移除掉,最终调用invokeInsertHook钩子函数

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值