生命周期：简单来说，就是一个组件从创建到销毁的整个过程
钩子函数
1.作用：特定的时间点，执行特定的操作
2.场景：组件创建完毕后，可以在created生命周期函数中发起Ajax请求，从而初始化data数据
vue生命周期总共分为四个阶段八个方法
初始化、挂载、更新、销毁
初始化：beforeCreate、created
挂载：beforeMount、mounted
更新：beforeUpdate、updated
销毁：beforeDestroy、destroyed
但还有个特殊的 activated、deactivated 这是keep-alive（组件缓存）组件激活时、停用时调用
vue3生命周期有
vue2中的beforeCreate、created换为 setup
挂载：beforeMount、mounted 变为 onBeforeMount、onMounted
更新：beforeUpdate、updated变为 onBeforeUpdate、onupdated
销毁：beforeDestroy、destroyed 变为 onBeforeUnmount、onUnmounted
小程序生命周期
主要分为三个部分
- 应用的生命周期
- 页面的生命周期
- 组件的生命周期
应用的生命周期
| 生命周期 | 说明 |
|---|---|
| onLaunch | 小程序初始化完成时触发，全局只触发一次 |
| onShow | 小程序启动，或从后台进入前台显示时触发 |
| onHide | 小程序从前台进入后台时触发 |
| onError | 小程序发生脚本错误或 API 调用报错时触发 |
| onPageNotFound | 小程序要打开的页面不存在时触发 |
| onUnhandledRejection() | 小程序有未处理的 Promise 拒绝时触发 |
| onThemeChange | 系统切换主题时触发 |
页面的生命周期
| 生命周期 | 说明 | 作用 |
|---|---|---|
| onLoad | 生命周期回调—监听页面加载 | 发送请求获取数据 |
| onShow | 生命周期回调—监听页面显示 | 请求数据 |
| onReady | 生命周期回调—监听页面初次渲染完成 | 获取页面元素（少用） |
| onHide | 生命周期回调—监听页面隐藏 | 终止任务，如定时器或者播放音乐 |
| onUnload | 生命周期回调—监听页面卸载 | 终止任务 |
组件的生命周期
| 生命周期 | 说明 |
|---|---|
| created | 生命周期回调—监听页面加载 |
| attached | 生命周期回调—监听页面显示 |
| ready | 生命周期回调—监听页面初次渲染完成 |
| moved | 生命周期回调—监听页面隐藏 |
| detached | 生命周期回调—监听页面卸载 |
| error | 每当组件方法抛出错误时执行 |
小程序执行过程在最后面
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选项
components/Life.vue - 创建一个文件
<script>
export default {
data(){
return {
msg: "hello, Vue"
}
},
// 一. 初始化
// 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
this.timer = setInterval(() => {
console.log("哈哈哈");
}, 1000)
}
}
</script>App.vue - 引入使用
<template>
<div>
<h1>1. 生命周期</h1>
<Life></Life>
</div>
</template>
<script>
import Life from './components/Life'
export default {
components: {
Life
}
}
</script>2.挂载阶段
mplate(要渲染的模板)
2.虚拟DOM挂载成真实DOM之前
3.beforeMount – 生命周期钩子函数被执行
4.Create … – 把虚拟DOM和渲染的数据一并挂到真实DOM上
5.真实DOM挂载完毕
6.mounted – 生命周期钩子函数被执行
components/Life.vue - 创建一个文件
<template>
<div>
<p>学习生命周期 - 看控制台打印</p>
<p id="myP">{{ msg }}</p>
</div>
</template>
<script>
export default {
// ...省略其他代码
// 二. 挂载
// 真实DOM挂载之前
// 场景: 预处理data, 不会触发updated钩子函数
beforeMount(){
console.log("beforeMount -- 执行");
console.log(document.getElementById("myP")); // null
this.msg = "重新值"
},
// 真实DOM挂载以后
// 场景: 挂载后真实DOM
mounted(){
console.log("mounted -- 执行");
console.log(document.getElementById("myP")); // p
}
}
</script>3.更新阶段
1.当data里数据改变, 更新DOM之前
2.beforeUpdate – 生命周期钩子函数被执行
3.Virtual DOM…… – 虚拟DOM重新渲染, 打补丁到真实DOM
4.updated – 生命周期钩子函数被执行
5.当有data数据改变 – 重复这个循环
components/Life.vue - 创建一个文件
准备ul+li循环, 按钮添加元素, 触发data改变->导致更新周期开始
<template>
<div>
<p>学习生命周期 - 看控制台打印</p>
<p id="myP">{{ msg }}</p>
<ul id="myUL">
<li v-for="(val, index) in arr" :key="index">
{{ val }}
</li>
</ul>
<button @click="arr.push(1000)">点击末尾加值</button>
</div>
</template>
<script>
export default {
data(){
return {
msg: "hello, Vue",
arr: [5, 8, 2, 1]
}
},
// ...省略其他代码
// 三. 更新
// 前提: data数据改变才执行
// 更新之前
beforeUpdate(){
console.log("beforeUpdate -- 执行");
console.log(document.querySelectorAll("#myUL>li")[4]); // undefined
},
// 更新之后
// 场景: 获取更新后的真实DOM
updated(){
console.log("updated -- 执行");
console.log(document.querySelectorAll("#myUL>li")[4]); // li
}
}
</script>4.销毁阶段
1.当$destroy()被调用 – 比如组件DOM被移除(例v-if)
2.beforeDestroy – 生命周期钩子函数被执行
3.拆卸数据监视器、子组件和事件侦听器
4.实例销毁后, 最后触发一个钩子函数
5.destroyed – 生命周期钩子函数被执行
components/Life.vue - 准备生命周期方法(Life组件即将要被删除)
<script>
export default {
// ...省略其他代码
// 四. 销毁
// 前提: v-if="false" 销毁Vue实例
// 场景: 移除全局事件, 移除当前组件, 计时器, 定时器, eventBus移除事件$off方法
beforeDestroy(){
// console.log('beforeDestroy -- 执行');
clearInterval(this.timer)
},
destroyed(){
// console.log("destroyed -- 执行");
}
}
</script>主要: App.vue - 点击按钮让Life组件从DOM上移除 -> 导致Life组件进入销毁阶段
<Life v-if="show"></Life>
<button @click="show = false">销毁组件</button>
<script>
data(){
return {
show: true
}
},
</script>应⽤的⽣命周期执行过程：
⽤户⾸次打开⼩程序，触发 onLaunch（全局只触发⼀次）
⼩程序初始化完成后，触发onShow⽅法，监听⼩程序显示
⼩程序从前台进⼊后台，触发 onHide⽅法
⼩程序从后台进⼊前台显示，触发 onShow⽅法
⼩程序后台运⾏⼀定时间，或系统资源占⽤过⾼，会被销毁
⻚⾯⽣命周期的执行过程：
- ⼩程序注册完成后，加载⻚⾯，触发onLoad⽅法
- ⻚⾯载⼊后触发onShow⽅法，显示⻚⾯
- ⾸次显示⻚⾯，会触发onReady⽅法，渲染⻚⾯元素和样式，⼀个⻚⾯只会调⽤⼀次
- 当⼩程序后台运⾏或跳转到其他⻚⾯时，触发onHide⽅法
- 当⼩程序有后台进⼊到前台运⾏或重新进⼊⻚⾯时，触发onShow⽅法
- 当使⽤重定向⽅法 wx.redirectTo() 或关闭当前⻚返回上⼀⻚wx.navigateBack()，触发onUnload
当存在也应用生命周期和页面周期的时候，相关的执行顺序如下：
打开小程序：(App)onLaunch --> (App)onShow --> (Pages)onLoad --> (Pages)onShow --> (pages)onRead
进入下一个页面：(Pages)onHide --> (Next)onLoad --> (Next)onShow --> (Next)onReady
返回上一个页面：(curr)onUnload --> (pre)onShow
离开小程序：(App)onHide
再次进入：小程序未销毁 --> (App)onShow(执行上面的顺序），小程序被销毁，（App)onLaunch重新开始执行.