异步请求初始化时数据读取问题

为了解决这个问题，我们首先需要了解最佳异步请求的时机

最佳异步请求的时机

我们到底该在什么情况下选择created,而又在什么情况下选择updated?

1. 对于作为子组件被调用的组件里，异步请求应当在mounted里调用，因为这个时候子组件可能需要涉及到对dom的操作；
2. 对于页面级组件，当我们需要使用ssr（服务端渲染）的时候，只有created是可用的，所以这个时候请求数据只能用它；
3. 对于页面级组件， 当我们做异步操作时，涉及到要访问dom的操作，我们仍旧只能使用mounted;
4. 对于一般情况，created和mounted都是可以的；

补充一点，在mounted被调用时，vue不保证子组件也都被挂载完毕了，所以如果希望整个视图渲染完毕再执行操作，需要使用$nexttick,使用方法如下：

mounted() {
  this.$nextTick(()=>{
      //code...
  })
}

$nexttick本身会接收一个回调函数，它实际上会让里面的代码延时执行，类似于setTimeout。

问题

“Error in render: "TypeError: Cannot read properties of undefined (reading '0')"”渲染错误问题

出现原因

axios向服务器请求了数据之后，模板编译的过程中一开始数据是为空数据，
这里的意思就是模板在渲染时候，读取对象中的某个对象的属性值时，这个对象不存在，通俗点就是三层表达式a.b.c，在对象a中没有对象b，那么读取对象a.b.c中的值，自然会报错。如果是两层表达式a.b则不会报错，返回的是undefined。

分析问题

我们发现这里的info是vuex中state管理加载的数据，异步调用显示，然后vue渲染机制中：异步数据先显示初始数据，再显示带数据的数据，
所以上来加载info时候还是一个空对象如下,当渲染完成后，才加载异步数据,
所以在渲染时，出现的三层表达式在info中取quotes[n]数组中的小标为n的对象还不存在，再在这个对象中取其他值自然会报错，但是渲染完成后，info中的值加载好了，自然可以取到，这也就解释了为什么界面正常显示，但开发者工具会报错的原因。

解决方法

1. 给标签添加v-if判断条件，如果info.quotes取不到，则不加载该标签即可解决。（注意，不能用v-show，v-show的机制是加载后，根据条件判断是否显示）
2. 在computed里面，使用判断语句if (this.info.quotes) 返回{this.info.quotes[0].quote}，效果等同于法1，但有缺陷，没有进入判断时会执行另外的语句，页面上会短暂的显示出内容。（不推荐）

<div id="box">
  <p id="text" v-if="info.quotes">{{ quote }}</p>
  <p id="author" v-if="info.quotes">{{ author }}</p>
  <el-row>
    <el-button id="new-quote" @click="changeInfo()">默认按钮</el-button>
  </el-row>
</div>

import axios from "axios";
export default {
  name: "Word",
  data() {
    return {
      info: {},
      n: 0,
    };
  },
  computed: {
    quote() {
      return this.info.quotes[this.n].quote;
    },
    author() {
      return this.info.quotes[this.n].author;
    },
  },
  methods: {
    changeInfo() {
      this.n = Math.floor(Math.random() * this.info.quotes.length);
    },
  },
  mounted() {
    axios.get(
        "https://gist.githubusercontent.com/camperbot/5a022b72e96c4c9585c32bf6a75f62d9/raw/e3c6895ce42069f0ee7e991229064f167fe8ccdc/quotes.json")
            .then((response) => {
        this.info = response.data;
      });
  },
};