面试路上难免磕磕绊绊
但是没想到这次遇到狼灭了
"你知道 vue 节点销毁的时候做了些什么吗?"
"..."
vue生命周期
我们知道vue的生命周期有这些
var LIFECYCLE_HOOKS = [
'beforeCreate',
'created',
'beforeMount',
'mounted',
'beforeUpdate',
'updated',
'beforeDestroy',
'destroyed',
'activated',
'deactivated',
'errorCaptured'
];
复制代码
其中'beforeDestroy', 'destroyed',是我们自己可以编写的生命周期函数
但是除此之外,其实vue还有一些钩子函数是内部使用的,其中也有destroy钩子
var hooks = ['create', 'activate', 'update', 'remove', 'destroy'];
复制代码
那么当一个节点销毁的时候,到底做了些啥呢,首先让我们来回顾一下vue中一个节点是怎么被触发销毁的
节点如何触发销毁?
当我们修改一个data的时候
由劫持的 set 触发了数据 deps 内所有关联的 watcher 的更新
接着触发组件的 update 从而进行新旧节点的 patch 进行相应的 dom 更新
当然 patch 函数的实现很复杂,有疑惑的同学可以去找找资料看看
今天我们这里只要知道在 patch 函数有三个地方会触发组件销毁就行了
1.节点删除或者替换
这个很好理解,比如我们使用 v-if 来控制一个组件是否存再
旧节点不存在了,这个当然得销毁掉
或者组件不是同一个 component 了,最常用的例子是 , 等等
这些组件会动态变换自己的组件类型,新的组件会创建出来,于是旧的就需要销毁了
2.删除children
接着 patch 进入第二阶段,patchVNode,这里会比对新旧节点是否都有 children
如果新节点没有子节点,说明是删除节点操作,则需要销毁 oldNode 的 children
3.children 内子节点被删除或者替换
最后是进入 updateChildren 阶段,也就是我们常说的 diff 阶段
diff 阶段会从新旧子节点的首尾进行一个循环
分别进首位,尾位,首尾,尾首判断
进行 patch ,新增,左右移动操作
当循环完成后,如果新子节点已经循环完了,旧子节点还没循环完
说明需要删除多余的节点
那么销毁的方法做了些什么呢?我们来看看源码
removeVnode函数
可以看到上边删除操作是调用的这个方法
function removeVnodes (parentElm, vnodes, startIdx, endIdx) {
for (; startIdx <= endIdx; ++startIdx) {
var ch = vnodes[startIdx];
if (isDef(ch)) {
if (isDef(ch.