vue 怎么销毁dom_刁钻面试官：vue 节点销毁的时候做了些什么？

面试路上难免磕磕绊绊

但是没想到这次遇到狼灭了

"你知道 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.