vue生命周期

359 阅读2分钟

beforeCreate:创建前

1、主要用来做初始化工作,可以创建一个loading

created:创建后

1、可以访问到 vm 身上所有的属性和方法

2、会将data 和 methods 身上所有的属性和方法都挂载在 vm 的实例身上

3、会将data身上所有的属性添加一个 getter/setter 方法,因此如果需要进去前后端数据交互,必须在这个生命周期中进行,如果数据没有提前在data中进行绑定,这个属性也不会有 getter/setter 方法,数据也不会动态进行改变

beforeMount:挂载前

1、数据和模板还没有进行相结合,在这个生命周期中,我们可以进行数据最后的修改

mounted:挂载后

1、数据和模板已经结合,可以通过 this.$refs 访问到真实的 DOM 结构

$refs:ref = “值必须是整个VDom中唯一”

           访问的时候通过this.$refs.值

ref与document的区别?

document是从整个页面去查找 DOM 结构,这个 DOM 结构已经插入到页面的DOM的结构

ref 是从当前VM的虚拟DOM中找到当前元素,ref是从内存中找到的DOM结构

beforeUpdate:更新前

当data中的数据发生变化的时候就会执行

1、可以访问到真实的DOM结构

2、可以对数据做最后的更改

3、当前数据和模板还没有更新完毕

uodated:更新后

1、数据更新后最新的DOM结构

2、特别注意,因为当前生命周期函数是一个频繁触发的函数,因此在当前生命周期中做一些事件绑定或者实例化的时候做一个提前判断

beforeDestroy:销毁前

1、当前还可以访问到真实的DOM结构以及data中的数据

2、一般我们都在这个生命周期函数中做一些事件解绑/移除的操作

destroyted:销毁后

1、将DOM与数据之间关联断开

2、在当前生命周期中,访问不到真实的DOM结构

多次执行的函数:

1、beforeUpdate 更新前

2、updated 更新后

组件第一次创建的时候会执行哪些:

1、beforeCreate 创建前

2、created 创建后

3、beforeMount 挂载前

3、mounted 挂载后

keep-alive包裹的组件,进行动态切换的时候,只有首次会进行创建和加载,之后就进入了缓存中,当调用的时候就会是(activated:活跃状态),未调用的时候进入不活跃状态(deactivated:不活跃状态)