【Vue】vue怎么在beforeCreate里获取data
被问的一个面试题:vue怎么在beforeCreate里获取data
回答
- 异步方式获取data。this.$nextTick或者setTimeout都行。相当于在初始化前告诉容器,等全执行完了再跑里面的代码。这种方式别说拿data了,拿渲染完DOM都OK~
- 同步方式的话,是要了解框架内部原理的。在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的方案是可以的
如果能保证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