在做vue项目的时候,遇到一个坑,严格来说不是一个坑,是我对文档理解的不是很到位罢了,在这里纪念一下这个坑哈哈:
我想在created方法里获取一个文档标签对象 audio但是死活都是null,试了很多次,有的时候是null有的时候不是null这我就纳闷了,于是我就去官方网站上看了一下他的生命周期:
图上很明确的指出created方法中 开始注入,这时候还不能访问dom元素,只有在mounted方法中才能访问到dom元素。
created
-
类型:
Function
-
详细:
在实例创建完成后被立即调用。在这一步,实例已完成以下的配置:数据观测 (data observer),属性和方法的运算,watch/event 事件回调。然而,挂载阶段还没开始,
$el
属性目前不可见。 -
参考:生命周期图示
最保险的还是
mounted: function () {
this.$nextTick(function () { // Code that will run only after the // entire view has been rendered })
}
-
el
被新创建的vm.$el
替换,并挂载到实例上去之后调用该钩子。如果 root 实例挂载了一个文档内元素,当mounted
被调用时vm.$el
也在文档内。注意
mounted
不会承诺所有的子组件也都一起被挂载。如果你希望等到整个视图都渲染完毕,可以用 vm.$nextTick 替换掉mounted
:mounted: function () { this.$nextTick(function () { // Code that will run only after the // entire view has been rendered }) }
该钩子在服务器端渲染期间不被调用。
-
参考:生命周期图示