在之前我們就提到，首次渲染之后，后續(xù)如果再調(diào)用 render 函數(shù)時(shí)，傳遞的 vnode 為 null 則表示是卸載。

當(dāng)時(shí)我們是直接通過(guò)執(zhí)行 container.innerHTML = ‘’ 來(lái)實(shí)現(xiàn)的，但是這樣做會(huì)有以下幾個(gè)問(wèn)題，如下：

• 容器內(nèi)可能是由某個(gè)或者多個(gè)組件渲染的，當(dāng)卸載操作發(fā)生時(shí)，應(yīng)該正確的調(diào)用這些組件的 beforUnmount、unmounted 等生命周期函數(shù)。
• 即使內(nèi)容不是由組件渲染的，有的元素存在自定義指令，我們應(yīng)該再在卸載操作發(fā)生時(shí)正確的執(zhí)行這些對(duì)應(yīng)指令的鉤子函數(shù)。
• 使用 innerHTML 清空容器的還有一個(gè)缺陷是，它并不會(huì)移除綁定在 DOM 元素上的事件處理函數(shù)

正確的卸載方式應(yīng)該是，根據(jù) vnode 對(duì)象獲取對(duì)應(yīng)與其相關(guān)聯(lián)的真實(shí) DOM 元素，然后使用原生 DOM 操作方式將該元素移除。為此，我們需要再 vnode 與真實(shí) DOM 元素之間建立聯(lián)系，修改 mountElement 函數(shù)，如下：

function mountElement(vnode, container) {// 讓 vnode.el 引用真實(shí)的 dom 元素const el = (vnode.el = hostCreateElement(vnode.type))// ... 省略其他代碼
}

這樣建立聯(lián)系之后，當(dāng)卸載的時(shí)候，只需要根據(jù) vnode.el 屬性即可獲取真實(shí)的 dom 元素，然后在將其從父元素中移除，如下：

function render(vnode, container) {if (vnode) {patch(container._vnode, vnode, container)} else {// 卸載操作if (container._vnode) {// 獲取 vnode 關(guān)聯(lián)的真實(shí) domconst { el } = container._vnode// 獲取 el 的父元素const parent = el.parentNode// 調(diào)用父元素的 removeChild 方法if (parent) {parent.removeChild(el)}}container._vnode = vnode}
}

根據(jù)之前的設(shè)計(jì)方案，這個(gè)卸載子元素的操作，會(huì)經(jīng)常用到，我們將其提取出來(lái)，封裝到 unmount 函數(shù)中，如下：

function unmount(vnode) {const { el } = vnodeconst parent = el.parentNodeif (parent) {parent.removeChild(el)}
}