vue3 recative Cannot read properties of null (reading 'subTree')

在Vue3中，当我们使用响应式数据时，如果数据为null或undefined，就会出现Cannot read properties of null (reading 'subTree')的错误。这是因为Vue3中的响应式系统使用了Proxy代理，而Proxy代理只能代理已经存在的属性，对于不存在的属性，就会报错。因此，我们需要在使用响应式数据之前，先对其进行判断，确保其不为null或undefined。

以下是解决该问题的两种方法：

1.使用v-if指令判断数据是否存在，只有当数据存在时才渲染组件。

<template>
  <div v-if="data">
    <!-- 渲染组件 -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: null // 响应式数据
    }
  }
}
</script>

2.使用可选链操作符（?.）判断数据是否存在，只有当数据存在时才访问其属性。

<template>
  <div>
    {{ data?.prop }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: null // 响应式数据
    }
  }
}
</script>