vue 生命周期

人的-生命周期

一组件从 创建 到 销毁 的整个过程就是生命周期

 

 Vue_生命周期

 1. 钩子函数

Vue 框架内置函数，随着组件的生命周期阶段，自动执行

作用: 特定的时间点，执行特定的操作

场景: 组件创建完毕后，可以在created 生命周期函数中发起Ajax 请求，从而初始化 data 数据

分类: 4大阶段8个方法

• 初始化

• 挂载

• 更新

• 销毁

阶段	方法名	方法名
初始化	beforeCreate	created
挂载	beforeMount	mounted
更新	beforeUpdate	updated
销毁	beforeUnmount	Unmounted

官网文档

 2. 初始化阶段

掌握初始化阶段2个钩子函数作用和执行时机

含义讲解:

1.new Vue() – Vue实例化(组件也是一个小的Vue实例)

2.init Events & Lifecycle – 初始化事件和生命周期函数

3.beforeCreate – 生命周期钩子函数被执行

4.Init injections&reactivity – Vue内部添加data和methods等

5.created – 生命周期钩子函数被执行, 实例创建

6.接下来是编译模板阶段 –开始分析

7.Has el option? – 是否有el选项 – 检查要挂到哪里

   没有. 调用$mount()方法
   有, 继续检查template选项

components/Life.vue - 创建一个文件

​

App.vue - 引入使用

​

​

3. 挂载阶段

掌握挂载阶段2个钩子函数作用和执行时机

含义讲解:

1.template选项检查

有 - 编译template返回render渲染函数
无 – 编译el选项对应标签作为template(要渲染的模板)

2.虚拟DOM挂载成真实DOM之前

3.beforeMount – 生命周期钩子函数被执行

4.Create … – 把虚拟DOM和渲染的数据一并挂到真实DOM上

5.真实DOM挂载完毕

6.mounted – 生命周期钩子函数被执行

 

 

components/Life.vue - 创建一个文件

​

4. 更新阶段

掌握更新阶段2个钩子函数作用和执行时机

含义讲解:

1.当data里数据改变, 更新DOM之前

2.beforeUpdate – 生命周期钩子函数被执行

3.Virtual DOM…… – 虚拟DOM重新渲染, 打补丁到真实DOM

4.updated – 生命周期钩子函数被执行

5.当有data数据改变 – 重复这个循环

 

 

components/Life.vue - 创建一个文件

准备ul+li循环, 按钮添加元素, 触发data改变->导致更新周期开始

​

5. 销毁阶段

掌握销毁阶段2个钩子函数作用和执行时机

含义讲解:

1.当$unmounted()被调用 – 比如组件DOM被移除(例v-if)

2.beforeUnmount– 生命周期钩子函数被执行

3.拆卸数据监视器、子组件和事件侦听器

4.实例销毁后, 最后触发一个钩子函数

5.unmounted– 生命周期钩子函数被执行

主要: App.vue - 点击按钮让Life组件从DOM上移除 -> 导致Life组件进入销毁阶段

​