vue源码解读--组件更新(子组件的更新流程)

目录导航

上一节我们分析到,vue在diff过程中将对子组件进行更新,调用子组件的prepatch,继而执行updateChildComponent。在updateChildComponent做props更新过程中将触发set发布广播触发watcher的update,继而执行子组件的patch,传入的新旧节点为:上一次渲染vnode、当前渲染vnode

vue源码解读--组件更新(子组件的更新流程)_第1张图片

组件节点是没有节点类型的,故isRealElement为false

执行sameVnode,本次的tag分别是ul和div,故返回false

拿到旧节点的根元素ul,父元素main

调用createElm,入参为:当前渲染vnode、[]、id为app的main元素、文本节点

当前的vnode非组件vnode,故createComponent为false

代码向下,data={attr:{id:"child"}}

children="我是flag"

tag="div"

vnode.elm=调用原生dom api创建的div元素

调用createChildren,创建子元素,本次示例只有一个文本元素"我是flag"

调用insert,此时页面将显示出"我是falg"和旧的"1"

回到patch,执行update,更新在父vnode中保存的占位的组件vnode

vue源码解读--组件更新(子组件的更新流程)_第2张图片

ancestor=旧的组件vnode

patchable=true。这是因为当前的vnode非组件vnode,其存在真实可挂载的dom节点tag

执行while循环,首先对模块执行销毁工作,这正好对应了在更新过程中添加的元素模块,如id、ref等。代码向下,如果是真实的dom节点,则重新挂载模块(可参考上一节中对cbs.update的分析)

(也就是说,while实际上是先递归的<可能存在组件嵌套的情况>向上将模块销毁,后添加一遍)

代码向下,执行destory,删除旧节点

你可能感兴趣的:(vue源码解读--组件更新(子组件的更新流程))