VUE应在那个生命周期获取后台数据?

Question

vue项目中使用axios获取后台数据是在那个生命周期中？created还是mounted？他们的区别在那？

Answer 1

mounted或者created都可以。created时dom还没有加载，适合调用一些对dom起作用的方法从后台获取数据。毕竟vue数据即视图嘛。可以把created周期视作js中的load()
其中created()钩子函数进行的DOM操作一定要放在Vue.nextTick()的回调函数中

created() {
  this.$nextTick(() => {
    //dom操作
  })
}

mounted时dom已经加载完毕，适合调用一些对dom起补充作用的方法从后台获取数据。可以把mounted视作jquery中的ready()。

一般来说mounted用的最多，因为大多数都是基于dom树，对视图的的更新和修改。

Answer 2

区别只有能不能操作 DOM 和子组件是否已加载。

但注意一点的是，如果你取数据是个异步方法，那么异步结束后跟组件是否已挂载`在时序上无法保证有必然的先后顺序。

举个例子：

created() {
    fetchAsync()
        .then(() => {
            // 此时 mounted 是否已经触发过，是无法保证的
            // 如果你需要 this.$refs 之类的操作
            // 那么稳妥起见需要 this.$nextTick 包裹
        });
}

mounted() {
    fetchAsync()
        .then(() => {
           // this.$refs 之类的操作不需要 this.$nextTick 包裹
        });
}

如果你不需要考虑上述这点的华，那么其实放哪儿都可以。

Answer 3

mounted相较created，此时元素已经挂载在了页面上。
两者都可以请求数据
然而我一般请求数据写在beforeRouteEnter中（项目中使用了vue-router）

Answer 4

其实区别不大。created 在组件刚创建好，mounted 时已经添加到 DOM 上。理论上后者的时候可能会重复更新 DOM，有那么一点性能损耗，但考虑到网络请求的异步特性，最终落实到产品当中的微乎其微。

Answer 5

如果在mounted中请求数据就会出现页面显示了元素但是里面是空的，页面大部分空白的情况(因为没有拿到数据)，在created里面写的话呈现出来的效果视觉上比较友好一些