认识

2023年06月10日

柏拉文

越努力，越幸运

一、认识

---

unmount 用于卸载操作。当发生卸载操作时, 我们不可以直接通过 innerHTML 清空容器, 这么做是不严谨的, 原因有三点:

1. 容器的内容可能是由某个或多个组件渲染的, 当卸载操作发生时, 应该正确地调用这些组件的 beforeUnmount、unmounted 等生命周期函数

2. 即使内容不是由组件渲染的, 有的元素存在自定义指令, 我们应该在卸载操作发生时正确执行对应的指令钩子函数

3. 使用 innerHTML 清空容器的另一个缺陷是: 它不会移除绑定在 DOM 元素上的事件处理函数

正确的卸载方式是: 根据 VNode 对象获取与其相关联的真实 DOM 元素, 然后使用原生 DOM 操作方法将该 DOM 元素移除。

二、细节

---

2.1 移除 DOM 元素

const unmount = vnode => {
    const parent = vnode.el.parentNode;
    if (parent) {
        parent.removeChild(vnode.el);
    }
}