vue动态绑定之访问文档元素

在做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 }) }

  该钩子在服务器端渲染期间不被调用。

• 参考：生命周期图示