vue生命周期

109 阅读1分钟

基本概念:vue实列从创建到销毁的过程

大致分为4大阶段--8大方法

每个阶段两个方法,一个什么什么之前,一个什么什么之后

1、初始化阶段

beforeCreated(){}

初始化了生命周期和时间对象,获取不到data中的数据
是组件创建之前触发的

created(){}

向vue注入了data和methods
可以获取到data
获取不到DOM结构
使用场景:用于获取页面的初始化数据(发起ajax请求)获取数据越快页面渲染越快,用户体验更好

2、挂载阶段

beforeMount(){}

DOM挂载前触发这个函数
获取DOM结构依旧为空

mounted(){}

DOM挂载成功后触发
可以获取到真实DOM
引用场景:操作DOM(增删改查标签),也可以获取页面初始数据(发起ajax请求)

3、更新阶段

beforeUpdate(){}

获取不到更新后的DOM中的值
在data改变DOM更新前触发

updated(){}

可以获取更新后的DOM中的值
data改变DOM更新后触发

4、销毁阶段

beforeDestroy(){}

销毁前触发的钩子函数
使用场景:清除全局的事件,或者计时器

destroyed(){}

销毁后触发的钩子函数

销毁当前组件

this . $destroy()