什么是生命周期?
每一个vue实例从创建到销毁的过程,就是这个vue实例的生命周期。
beforeCreate( 创建前 )
- 组件被创建之前会调用,data、methods都没有初始化,一般在这个阶段不进行操作。
created( 创建完成 )
- 这个时候,Vue实例中的data、methods已经被初始化,属性也被绑定,但是此时组件的template还没有被挂载,还是虚拟dom,真实dom还没有生成。
- 一般在created里面发送网络请求 ,监听watch数据 等等。
beforeMount( 组件挂载之前 )
- 此时模板已经编译完成,但是还没有渲染到页面中,(即为虚拟dom加载为真实dom)
- 一般在这个阶段不做操作
mounted( 组件挂载完成 )
- 虚拟DOM生成真实DOM完成,此时模板已经被渲染成真实DOM
- 作用:获取DOM,使用DOM
beforeUpdate( 组件更新之前 )
- 更新前状态(view层的数据还没有改变,data中的数据已经改变了),重新渲染之前触发,然后vue的虚拟dom机制会重新构建虚拟dom与上一次的虚拟dom树利用diff算法进行对比之后重新渲染。只有view上面的数据变化才会触发beforeUpdate和updated,仅属于data中的数据改变是并不能触发。也就是说数据已经改变了,DOM还没有更新。
updated( 组件更新完成 )
- 数据已经更改完成,dom也重新render完成。
beforeUnmount( 组件卸载之前 )
- 当这个钩子被调用时,组件实例依然还保有全部的功能。
- 作用:清除计时器等等
unmounted( 组件卸载完成 )
- 在一个组件实例被卸载之后调用。
- 作用:卸载事件监听