vue 实例从创建到销毁的过程就是生命周期
如何知道, Vue生命周期到达哪个阶段了?
通过下面的钩子函数
钩子函数: Vue 框架内置函数，随着组件的生命周期阶段，自动执行
- 作用: 特定的时间点,执行特定的操作
- 场景: 组件创建完毕后，可以在created 生命周期函数中发起Ajax 请求，从而初始化 data 数据
- 分类: 4大阶段8个方法
| 阶段 | 方法名 | 方法名 |
|---|---|---|
| 初始化 | beforeCreate | created |
| 挂载 | beforeMount | mounted |
| 更新 | beforeUpdate | updated |
| 销毁 | beforeDestroy | destroyed |
另外三个生命周期函数不常用:
keep-alive 主要用于保留组件状态或避免重新渲染。
activated只有在keep-alive 组件激活时调用。
deactivated只有在keep-alive 组件停用时调用。
errorCapured 当捕获一个来自子孙组件的错误时被调用。此钩子会收到三个参数：错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。此钩子可以返回 false 以阻止该错误继续向上传播
1: 初始化阶段
含义讲解:
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选项
Vue实例从创建到编译模板执行了 : beforeCreate / created两个钩子函数
created函数触发能获取data不能获取真实DOM
重点: created
此处可以访问 methods data computed 等数据
应用场景: 发送 ajax 请求, 做一些初始化操作
2: Vue_挂载阶段
1.template选项检查
有 - 编译template返回render渲染函数
但是: 因为Vue脚手架环境使用webpack+vue-template-compiler包, 进行模板编译转换后运行, 所以vue.js里只有运行时的代码, 所以这么写在脚手架环境会报错
所以: 脚手架环境, 直接写的是render函数方式进行渲染 2.虚拟DOM挂载成真实DOM之前
3.beforeMount – 生命周期钩子函数被执行
4.Create … – 把虚拟DOM和渲染的数据一并挂到真实DOM上
5.真实DOM挂载完毕
6.mounted – 生命周期钩子函数被执行
总结: 重点: mounted
此处可以获取真实 DOM 元素
应用场景: echarts 初始化图表等类似的库, 需要用到真实 DOM echarts.init(DOM 对象)
3: Vue-更新阶段
含义讲解:
1.当data里数据改变, 更新DOM之前
2.beforeUpdate – 生命周期钩子函数被执行
3.Virtual DOM…… – 虚拟DOM重新渲染, 打补丁到真实DOM
4.updated – 生命周期钩子函数被执行
5.当有data数据改变 – 重复这个循环
总结:
beforeUpdate: 数据已更新, 但是 DOM 没有更新
updated: 数据和 DOM 都更新了
4: Vue_销毁阶段
含义讲解:
1.当$destroy()被调用 – 比如组件DOM被移除(例v-if)
2.beforeDestroy – 生命周期钩子函数被执行
3.拆卸数据监视器、子组件和事件侦听器
4.实例销毁后, 最后触发一个钩子函数
5.destroyed – 生命周期钩子函数被执行
总结:一般在beforeDestroy/destroyed里做手动消除计时器/定时器/全局事件
