异步数据加载

一. Vue 组件渲染是“先渲染模板，再获取数据”

• 页面加载时，Vue 会立即渲染模板
• 此时 data() 中的变量还没被异步请求填充
• 所以模板里面的内容执行时{{ 内容 }}，内容是null,报错：Cannot read properties of null

二、Vue2 模板渲染安全性知识点

1.v-if延迟渲染：

<div v-if="caseInfo">
 {{ caseInfo.tlv_ajbh }}
</div>

2. 可选链

{{ caseInfo?.tlv_ajbh }}

3. 初始化默认对象

caseInfo: {}

三、Vue 生命周期知识点（关键）

created() {
 this.fetchDate(id)
}

created 生命周期触发时：

• 模板已经开始渲染
• 但 数据请求还没完成