0

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

5个回答

5

已采纳

<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回调函数中获取

3
  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的……

0

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

0

wangqibiao的方案是可以的

clipboard.png

0

如果能保证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里发请求取数。

撰写答案