组件从创建到销毁的整个过程就是生命周期
钩子函数
vue框架内置函数,随着组件的生命周期阶段,自动执行
组件创建完毕后,可以在created 生命周期函数中发起Ajax 请求,从而初始化data数据
分类:4大阶段8个方法
- 初始化
- 挂载
- 更新
- 销毁
阶段 | 方法名 | 方法名 |
初始化 | beforecreate 初始化前 | created 初始化后 |
挂载 | beforeMount 挂载前 | mountd 挂载后 |
更新 | beforeUpdate 更新前 | updated 更新后 |
销毁 | beforeDestroy 销毁前 | destroyed 销毁后 |
初始化阶段
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选项
1.beforeCreate 获取到data和methods之前
2.created 获取到data和methods 之后
// 一. 初始化
// new Vue()以后, vue内部给实例对象添加了一些属性和方法, data和methods初始化"之前"
beforeCreate() {
console.log("beforeCreate -- 执行");
console.log(this.msg); // undefined
},
// data和methods初始化以后
// 场景: 网络请求, 注册全局事件
created() {
console.log("created -- 执行");
console.log(this.msg); // hello, Vue
},
挂载阶段
1.template选项检查
有 - 编译template返回render渲染函数
无 – 编译el选项对应标签作为template(要渲染的模板)
2.虚拟DOM挂载成真实DOM之前
3.beforeMount – 生命周期钩子函数被执行
4.Create … – 把虚拟DOM和渲染的数据一并挂到真实DOM上
5.真实DOM挂载完毕
6.mounted – 生命周期钩子函数被执行
1beforemount 真实DOM挂载之前
2.mountd 真实DOM挂载后
// 真实DOM挂载之前
beforeMount() {
console.log("beforeMount -- 执行");
console.log(document.getElementById("myP")); // null
this.msg = "重新值";
},
// 真实DOM挂载以后
// 场景: 挂载后真实DOM
mounted() {
console.log("mounted -- 执行");
console.log(document.getElementById("myP")); // p
},
更新阶段
1.当data里数据改变, 更新DOM之前
2.beforeUpdate – 生命周期钩子函数被执行
3.Virtual DOM…… – 虚拟DOM重新渲染, 打补丁到真实DOM
4.updated – 生命周期钩子函数被执行
5.当有data数据改变 – 重复这个循环
1.当data发生变化后触发beforeUpdate
beforeUpdate 拿到更新之前的数据
updated 拿到更新之后的数据
// 更新 当data的数据发生改变
// 更新之前
beforeUpdate() {
console.log("beforUpdate --被执行");
console.log(document.querySelectorAll("#myUl>li")[4]);
},
// 获取更新后的
updated() {
console.log("update -- 被执行");
console.log(document.querySelectorAll("#myUl>li")[4]);
},
销毁阶段
1.当$destroy()被调用 – 比如组件DOM被移除(例v-if)
2.beforeDestroy – 生命周期钩子函数被执行
3.拆卸数据监视器、子组件和事件侦听器
4.实例销毁后, 最后触发一个钩子函数
5.destroyed – 生命周期钩子函数被执行
beforeDestory 组件DOM被销毁时触发
destoryed 组件DOM被销毁后