Vue 之 生命周期

什么是生命周期?

又名: 生命周期回调函数、生命周期函数、生命周期钩子

是 Vue在关键时刻帮助我们调用的一些特殊名称的函数

vue的生命周期就是从创建到销毁的过程中,在某个特定的时间点自动执行的函数,有8个生命周期函数:beforeCreateCreatebeforeMountMountedbeforeUpdateUpdatebeforeDestorydestoryed

生命周期函数中的this指向vm组件实例对象 

生命周期函数的名字不可更改(mounted),但函数的具体内容时程序员根据需求编写的 

下图为生命周期流程图 

1. beforeCreate(将要创建)

 beforeCreate()函数是vue将要创建但还没有创建的函数,此时无法通过vm访问到data的数据和methods中的方法

初始化:生命周期,事件,但数据代理还未开始

2. Create(创建完毕)

 Create()函数,此时可以通过vm访问到data中的数据,methods中的方法

vue实例对象已经创建完成后调用该函数,数据监测,数据代理等都已经开始工作,这时候可以调用methods中的方法和使用data中的数据了

3. beforeMount(将要挂载)

 beforeMount()函数表示vue开始解析模板,对代码中的指令进行执行,渲染到虚拟DOM中,(虚拟DOM存在内存中),值得注意的是,此时模板还没有渲染到页面上,页面上呈现的是未经编译的DOM结构,所有对DOM的操作最终都不会奏效

4. Mounted (挂在完毕)

 Mounted()函数是将内存中解析的虚拟DOM转为真实DOM插入到页面中去

页面此时呈现的是经过编译的DOM,对DOM的操作做都可以实现,到此为止,初始化过程就结束了

一般在这个阶段进行:开启定时器,发送网络请求,订阅消息,绑定自定义事件等初始化的操作

5.beforeUpdate(将要更新)

 beforeUpdate()函数阶段页面显示的数据还是旧的,未更新的数据,但是data中的数据是最新的,页面尚未和数据保持同步

beforeUpdate-->Update  的这个阶段会根据新的数据生成新的DOM,将新的DOM与旧的DOM进行比较,完成页面更新,完成了model-->view(视图层)的更新

6. Update(更新完毕)

 Update()阶段数据是新的,页面显示的数据也是最新的,页面和数据保持同步

7. beforeDestory(将要销毁)

 beforeDestory()阶段处于即将销毁的阶段,实例对象中的data,methods等等都还是处于可用状态,

一般在此阶段关闭定时器,取消订阅消息,解绑自定义事件等操作

8. destoryed(销毁完毕)

 destoryed()阶段组件已经完成销毁了,此时所有的指令,数据都不可用

关于销毁Vue实例

  • 销毁后借助Vue开发者工具看不到任何信息
  • 销毁后自定义事件会失效,但原生DOM事件依然有效
  •  一般不会在beforeDestroy操作数据,因为即便操作数据,也不会再触发更新流程了 

生命周期是学习vue非常重要的一个阶段,一定要弄懂学懂 !

猜你喜欢

转载自blog.csdn.net/m0_53619602/article/details/126714880