生命周期
组件声明周期的几个过程
- 创建
- 挂载
- 更新
- 销毁
创建
- beforeCreate (创建前)
初始化事件和生命周期后 - created (创建后)
相关数据注入时,这个时候可以获取到data中的值,但是无法获取DOM
挂载
- beforeMount (挂在前)
当data数据已经和vue模板渲染出HTML时,页面上还没有内容 - mounted (挂在后)
将编译好的HTML替换到页面上后,这个时候可以获取到真实的DOM
更新
- beforeUpdate (更新前)
当data中的值发生变化前,会触发该函数 - updated (更新后)
当data中值发生变化后,会触发该函数
销毁
- beforeDestroy (销毁前)
- destroyed (销毁后)
{
data () {
return {}
},
methods: {},
computed: {},
生命周期钩子函数 () {
}
}
nextTick
如果我们想要在Vue中使用DOM对象,可以使用该方法
this.$nextTick(() => {
// 这个函数会等待DOM执行完成后执行
})
this.$nextTick().then(() => {
// 这个函数会等待DOM执行完成后执行
})
ref
如果我们想要获取到DOM对象或者组件对象,可以给对应的标签添加ref属性并且起一个自定义名字
<child ref="child"></child>
<!-- this.$refs.child 这个获取到的是一个组件对象 -->
<div ref="div"></div>
<!-- this.$refs.div 这个获取到的是一个DOM对象 -->
ref最好结合nextTick使用
声明周期图示.jpg