记一次Vue3渲染报错 Cannot read properties of undefined (reading 'name')

代码

<template>
{{ post.category.name }}
</template>

export default {
  data: () => ({
    post: {
    }
  }),
  methods: {
    getNew(id) {
      getNewById(id).then(response => {
        console.log(response.data.data)
        this.post = response.data.data

      })
    }
  },
  created() {
    this.getNew(this.$route.params.id)
  }
}

我在created函数中就调用了该函数，会给post传值，但仍然报错

报错原因

undefind和null值中都没有元素，访问这个null值的属性是不存在的，因此会报错

寻根问底

翻到Vue3生命周期

发现在渲染节点之前就已经调用created钩子函数了，这是怎么回事？ 想到vue3那么大的框架，肯定是我的问题 于是翻到API手册

上面写着 在组件实例处理完所有与状态相关的选项后调用。

当这个钩子被调用时，以下内容已经设置完成：响应式数据、计算属性、方法和侦听器

也就是说{{ }} 括起来的先是被当作响应式数据被处理，为了渲染组件做准备

从报错栈中看

renderFnWithContext是代理类根据上下文渲染函数

这个上下文在NewPost.vue中有所引用

也就是在created()之前就已经有简单的节点内部的数据渲染了

解决办法

将调用的属性，写入post，此时post的属性不再是空值就不会报错

post: { category: {} }