【Vue】vue怎么在beforeCreate里获取data

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

回答

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

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

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

wangqibiao的方案是可以的

【Vue】vue怎么在beforeCreate里获取data

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

以上是 【Vue】vue怎么在beforeCreate里获取data 的全部内容, 来源链接: utcz.com/a/74773.html

回到顶部