vue怎么在beforeCreate里获取data

Question

被问的一个面试题：vue怎么在beforeCreate里获取data

Answer 1

1. 异步方式获取data。this.$nextTick或者setTimeout都行。相当于在初始化前告诉容器，等全执行完了再跑里面的代码。这种方式别说拿data了，拿渲染完DOM都OK~
2. 同步方式的话，是要了解框架内部原理的。在beforeCreate前，所有的options都会先存到vm.$options中，在beforeCreate之后，将$options里的data啦，props啦，methods啦等等一个个附到vm上，然后再触发created钩子。所以在beforeCreate的时候，通过this.message是拿不到值的，在created的时候就能通过this.message拿到值了。

一定要在beforeCreate的时候就同步去拿data里的值的话，就是直接从this.$options.data里去拿。如果data中的初始值是简单的string，那直接this.$options.data()["message"]就好.涉及到复杂点的情况，建议看看源码里是怎么处理的，具体在core/instance/state.js中的initData(vm)里。

但是实际情况中从来没遇到过需要在组件还没初始化就去拿data的……

Answer 2

<div id="app"></div>
<script>

var vm = new Vue({
  el: '#app',
  data() {
    return {
      message: "你好呀！"
    }
  },
  beforeCreate() {
    this.$nextTick(function () {
      console.log(this.message);
    })
  }
});

</script>

在 this.$nextTick回调函数中获取

Answer 3

不能获取，最早获取到data的生命周期是created中。

Answer 4

wangqibiao的方案是可以的

Answer 5

如果能保证this.$nextTick方法的执行是在created后，那就可以。如果不能保证呢？因为你不知道this.$nextTick里的一堆东西执行的确切时间。

用promise方案更靠谱：

let F = null;
export default {
    //...
    data(){
        return {
            dataList:[]
        }
    },
    beforeCreate() {
        F = fetchData(//fetchData是取数方法
            //...返回promise
        )
    },
    created() {
        F.then(data=>{
            this.dataList = data
        })
    }
}

这就做到了在beforeCreate里发请求取数。