1. 生命周期
什么是vue的生命周期?
一个组件从 创建 到 销毁 的全过程就是生命周期
Vue的生命周期
2. 钩子函数
vue框架内置函数,伴随着组件的生命周期阶段,自动执行
作用: 特定的时间点,执行特定的操作
使用场景: 组件创建完成完毕后,可在created生命周期函数中发起Ajax请求,从而初始化 data 数据
分类: 四大阶段8个方法
阶段 | 方法名 | 方法名 |
---|---|---|
初始化 | beforeCreate | created |
挂载 | beforeMount | mounted |
更新 | beforeUpdate | updated |
销毁 | beforeDestroy | destroyed |
vue生命周期官方文档:官网文档
下图展示了实例的生命周期
2.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选项 – 检查要挂到哪里
1. 没有. 调用$mount()方法
2. 有, 继续检查template选项
注意:
Vue实例从创建到编译模板执行了beforecreate和created钩子函数
- created不能获取DOM元素,但是能触发获取data
- beforecreate 获取不到data,得到的值是undefined
2.2 挂载阶段
1. template选项检查
1. 有 - 编译template返回render渲染函数
2. 无 – 编译el选项对应标签作为template(要渲染的模板)
2. 虚拟DOM挂载成真实DOM之前
3. beforeMount – 生命周期钩子函数被执行
4. Create … – 把虚拟DOM和渲染的数据一并挂到真实DOM上
5. 真实DOM挂载完毕
6 .mounted – 生命周期钩子函数被执行
注意:
- beforeMount在真实DOM挂载之前触发,拿不到DOM元素
- mounted在真实DOM挂载之后触发,能拿到DOM元素
beforeMount 预处理data 不会触发updated钩子函数
2.3 更新阶段
1.当data里数据改变, 更新DOM之前
2.beforeUpdate – 生命周期钩子函数被执行
3.Virtual DOM…… – 虚拟DOM重新渲染, 打补丁到真实DOM
4.updated – 生命周期钩子函数被执行
5.当有data数据改变 – 重复这个循环
2.4 销毁阶段
1.当$destroy()被调用 – 比如组件DOM被移除(例v-if)
2.beforeDestroy – 生命周期钩子函数被执行
3.拆卸数据监视器、子组件和事件侦听器
4.实例销毁后, 最后触发一个钩子函数
5.destroyed – 生命周期钩子函数被执行
完结...