vue 获取后端json返回嵌套对象渲染问题

项目场景：

在前端项目中会遇到后端返回一个对象中存在多个实体的对象，若我们直接渲染(直接渲染第三级)，例如：
html:

<span>设备IMEI：{{items.deviceVO.imei}}</span><br>

data:

data () {
   items: ''
}

虽然不影响渲染，但vue在浏览器会抛出警告。

问题描述及原因分析：

问题:

Error in render: “TypeError: Cannot read properties of undefined (reading ‘imei’)”

分析(参考网上及猜想)

Vue 在页面加载时，在 created 钩子函数 之前会初始化 data{} 中的数据，在 created 钩子函数 之后 开始编写模板，直接渲染

<span>设备IMEI：{{items.deviceVO.imei}}</span><br>

data{} 中没有定义一级对象(items)中的第二级对象(deviceVO),所以会报 undefined 的错误，当 mounted 钩子函数 请求后台获取 json(嵌套对象) 绑定渲染，所以不影响到渲染结果。（虽然不影响，但是就是看他不爽）

解决方案：

方案一

在三级标签前加 v-if 校验，如果没有该对象，就不显示，等请求后端获取数据后，在响应，例如：

<span v-if="items.deviceVO">设备IMEI：{{items.deviceVO.imei}}</span><br>

适用场景： 因为比较快捷，用于嵌套对象比较少，嵌套对象变量少

方案二

直接将页面渲染所需要的对象提前定义，例如：

data () {
   items: {
        // 对象一
        deviceHandleVO: '',
        // 对象二
        deviceSensorVO: '',
        // 对象三
        deviceVO: ''
      },
}

适用场景： 用于嵌套对象比较大，是代码耦合度低