vue3报错 TypeError: Cannot read properties of null (reading 'map')

这个错误通常会在Vue 3中的模板代码中出现。这是因为在模板中，当组件尚未渲染时，数据可能尚未被解析。为了解决这个问题，你可以使用v-if指令将元素隐藏，直到它被渲染时再显示出来。你也可以使用v-for指令来循环渲染数组，但在使用时一定要确保数组不为空。以下是两种解决方法：

1. 在v-if指令中包含一个非空的数组：

<template>
  <div v-if="items && items.length">
    <ul>
      <li v-for="item in items" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: []
    }
  },
  mounted() {
    // 异步获取items数据并更新
    this.items = [{id: 1, name: 'item1'}, {id: 2, name: 'item2'}, {id: 3, name: 'item3'}]
  }
}
</script>

2. 在mounted生命周期函数中等待DOM渲染完毕：

<template>
  <div ref="list"></div>
</template>

<script>
export default {
  mounted() {
    // 异步获取数据并渲染到DOM上
    this.$nextTick(() => {
      const list = this.$refs.list
      // 使用list进行DOM操作
    })
  }
}
</script>