Vue3 报错：Cannot read properties of null (reading 'insertBefore')

一不小心又来了一个线上问题。这个错误出现在“最不可能出现问题的地方”，我的自信来源于v-else，以为不会影响现有逻辑，结果问题就在v-else。搜了网上的资料，有一些其他的情况，目前我遇到的是与v-if相关的，仅记录此例。

场景

同一个 div 上，既绑定了 v-else又绑定了一个自定义指令。

组件刚挂载时，v-if 不满足，显示该 div
该 div 执行mounted钩子函数时，自定义指令会把该元素移除
过了一会，v-if条件满足，然后 vue 派发更新，此时 vue 内部抛出异常

测试文件（可以查看 demo）：

<script src="https://cdn.bootcdn.net/ajax/libs/vue/3.3.4/vue.global.js"></script>
<div id="app">
  <div v-if="hasData">hasData</div>
  <div v-else v-permission-or="['admin']">else</div>
</div>

<script>
  const { ref, nextTick } = window.Vue
  // 用户的权限只有 dev
  const myPermissions = ['dev']
  // mock 请求
  const request = () => {
    return new Promise(resolve => {
      setTimeout(() => {
        resolve()
      }, 500)
    })
  }

  Vue.createApp({
    directives: {
      'permission-or': {
        mounted(el, binding, vnode, prevVnode) {
          if (!myPermissions.includes(binding.value)) {
            // 用户是没有权限的，所以必然会执行此处
            el.remove()
            // 移除后，其父节点为 null
            console.log('el.parentNode', el.parentNode)
          }
        }
      }
    },
    setup() {
      const hasData = ref(false)
      request().then(() => {
        hasData.value = true
      })
      return { hasData }
    }
  }).mount('#app')
</script>

源码分析

首先依赖收集部分就不赘述了，在依赖更新时，会触发effect:

componentUpdateFun函数中，会调用patch函数：

注意这里传入的第三个参数，实际取的是该节点的父元素：重点：取到的值是什么呢？是null，因为文档中已经不存在该节点了，虽然还能获取到该节点的引用（应该是依赖收集阶段保存的），但是其父元素的引用是无法拿到的。

继续看，到patch函数内，首先会判断新旧元素是否相同，是则直接 return。这里显然不满足，于是会继续判断isSameVNodeType，该方法的作用是判断是否为同一个节点，我们这里也不是同一个，是要从第二个 div 变为第一个 div，所以isSameVNodeType(n1, n2)为 false，这个if会进去，然后会unmount掉旧节点n1，这一行执行完后，v-if和v-else绑定的元素都没展示了，然后把n1设为 null。