一、前言

之前经常遇到这个问题，Vue Cannot read property ‘xxx’ of undefined 今天就总结下，剖析下原因。

二、问题

场景一：获取 table.content.name

<template>
  <div>单位：{{table.content.name}}</div>
<template>
<script>
export default {
  data() {
    return {
      table:{} // 初始的时候赋值为空字符串
    };
  },
  created(){
    this.loadTable()
  },
  methods:{
    async loadTable() {
      const { code, data } = await databoard.getTable();
      if(code === 0){
         this.table = data
         // 后端返回的格式是
         // table:{
         //   title:'经济',
         //   content:{
          //     name:'经济'
         //   }
        // }
      }
    }
  }
}
<script>

结果：运行之后报错，虽然报错了但数据可以显示出来
场景二：把代码稍做改动，取 table.title

<template>
  <div>单位：{{table.title}}</div>
<template>
<script>
export default {
  data() {
    return {
      table:{} // 初始的时候赋值为空字符串
    };
  },
  created(){
    this.loadTable()
  },
  methods:{
    async loadTable() {
      const { code, data } = await databoard.getTable();
      if(code === 0){
         this.table = data
      }
    }
  }
}
<script>

结果：不报错，并且数据可以显示出来

❓ 问题一： 场景一中为什么报错，报错之后还可以正常显示数据 ？

答：首先是异步加载数据，异步显示数据，所以刚开始显示的是初始数据，等后台把数据传过来再显示后台传过来的数据。初始数据就是我们在data函数中赋值的数据，也就是{ }空对象；
简单模拟下显示的过程：首先页面刷新，dom树扫描显示数据，此时后台还没有把数据传过来，所以只能显示我们在data函数中赋值的初始值，table是空对象{ }，table.content 为 undefined，执行table.content.name控制台报错，等后台数据返回回来，显示返回回来的数据，所以才出现控制台虽然报错，但可以正常显示

❓ 问题二： data函数定义的初始值table里面没有name这个属性，所以报错这点没问题，但是table里面也没有title这个属性为什么不报错 ？

答：对于table.title：table.title访问一个对象不存在的属性，值为undefined，放到页面还是空，所以就不报错了；
对于table.content.name：table.content访问一个对象不存在的属性，值为undefined，再往下访问就是undefined.name肯定会报错了。

也就是说我这里有一个对象table为{ }，{{ table.name }} 是不会报错的，但是 {{ table.name.id }} 就会报错，结果值是undefined，放页面时不报错

三、解决

加上 v-if 先判断下是否有数据，有数据了再渲染模板。
注意：不能用 v-show 代替，v-show的原理是 display:none，其实模板已经渲染了只是 display:none了

 <template>
   <div v-if="table.content">单位：{{table.content.name}}</div>
 <template>

---

🍓小插曲

  <ul>
    <li class="clearfix" v-for="item in barData" :key="item.id">
      <span>{{item.id}}</span>
    </li>
  </ul>

结果： 初始值barData设置{ }或者undefined 是不会报错的，没有就不循环了。