共计 3319 个字符，预计需要花费 9 分钟才能阅读完成。
目录
前言
生命周期
钩子函数使用方法
编辑
周期 —– 创建阶段
创建阶段做了些什么事
该阶段可以干什么
周期 —- 挂载阶段
挂载阶段做了什么事
该阶段适合干什么
周期 —- 更新阶段
更新阶段做了什么事
该阶段适合做什么
周期 —- 销毁阶段
销毁阶段做了什么事
该阶段适合做什么
前言
Vue 生命周期分为四个周期：创建、挂载、更新、销毁
生命周期
每个周期对应两个函数，对应的函数又叫钩子函数
创建：
beforeCreate() —— 创建前
created() —— 创建后
挂载：
beforeMount() —— 挂载前
mounted() —— 挂载后
更新：
beforeUpdate() —— 更新前
updated() —– 更新后
销毁：
beforeDestroy() ——- 销毁前
destroyed() —— 销毁后
钩子函数使用方法
{{msg}}
{{num}}
更新数据
销毁
调用该方法
this.$destroy()
周期 —– 创建阶段
生成虚拟 dom
该周期包含两个钩子函数，创建前 beforeCreate() 和创建后 Created()
所谓的创建不是指 Vue 实例的创建，而是指数据代理和数据监测的创建，以此来分创建前和创建后
在创建前，是无法访问 data 中的数据的，包括 methods
例：
在原代码的基础上，访问 data 中的 num
// 创建前
beforeCreate(){
console.log(‘beforeCreate’,this.num);
}
创建后是可以访问的，包括 methods
// 创建后
created(){
console.log(‘Created’,this.num);
}
创建阶段做了些什么事
- 创建 Vue 实例 vm
- 初始化事件对象和生命周期
- 调用 beforeCreate() 钩子函数（此时还无法通过 vm 去访问 data 中的属性）
- 初始化数据代理和数据监测
- 调用 created() 钩子函数（此时数据代理和数据监测已经创建完毕，可以通过 vm 去访问 data 中的属性）
- 编译模板语句生成虚拟 dom(此时只是生成虚拟 dom, 页面上还没有渲染)
该阶段可以干什么
- beforeCreate(): 可以在此时加一些 loading 效果
- created: 结束 loading 效果，发送一些网络请求，获取数据，也可以添加定时器
周期 —- 挂载阶段
生成真实 dom
该阶段包含两个钩子函数，挂载前 beforeMount() 和挂载后 mounted()
挂载前和挂载后中间存在一个真实 dom 的生成
而挂载前和创建后之间存在一个虚拟 dom 的生成
在挂载前，是无法修改页面内容的
// 挂载前
beforeMount(){
console.log(‘beforeMount’);
document.querySelector(‘h1′).innerHTML=’ 挂载 ’
}
挂载后是可以修改的
// 挂载后
mounted(){
console.log(‘Mounted’);
document.querySelector(‘h1′).innerHTML=’ 挂载 ’
}
挂载阶段做了什么事
- 调用 beforeMount() 钩子函数（此时页面还未渲染，真实 dom 还没生成）
- 给 vm 追加 $el 属性，用它来代替 ”el”，$el 代表了真实的 dom 元素（此时真实 dom 生成，页面渲染完成）
- 调用 mounted() 钩子函数
该阶段适合干什么
mounted: 可以操作页面的 dom 元素了
周期 —- 更新阶段
该阶段只有在 data 变化后才会触发，进行重新渲染
该周期包含两个钩子函数，更新前 beforeUpdate() 和更新后 updated()
这里的更新前是指 data 中的数据更新了，但是页面还没重新渲染前
更新前
使用断点 debugger
// 更新前
beforeUpdate(){
console.log(‘beforeUpdata’);
debugger
}
更新后
解开断点
// 更新后
updated(){
console.log(‘Updataed’);
}
其中 diff 算法就是在更新前和更新后之间进行的，虚拟 dom 进行对比，生成真实 dom 渲染到页面
更新阶段做了什么事
- data 发生改变（这是该阶段开始的标志）
- 调用 beforeUpdate() 钩子函数（此时只是内存中的 data 数据发生变化，页面还没更新）
- 虚拟 dom 重新渲染和修补
- 调用 updated() 钩子函数（此时页面已更新）
该阶段适合做什么
- beforeUpdate: 适合在更新之前访问现有的 dom, 例，手动清除已添加的事件监听器
- updated：页面更新后，如果想对数据作统一处理，可以在这里完成
周期 —- 销毁阶段
卸载监视器，子组件，事件监听器
该阶段包含两个钩子函数，销毁前 beforeDestroy() 和销毁后 Destroy()
与其说是销毁其实是卸载，卸载 Vue 实例上面的所有
该阶段只有调用该方法才能进入
vm.$destroy()
销毁前
打印 vue 实例对象，查看监视器，销毁前，监视器还是激活状态
// 销毁前
beforeDestroy(){
console.log(‘beforeDestory’);
console.log(this);
debugger
}
虽然是激活状态，但是还是无法监听 ，我们在原有的代码基础上监听 data 中的 num 属性
watch:{num(){console.log('监听一次');
}
},
当 num 属性值变化时，成功监听到了，当我们执行销毁时，由上得知，监听器还是在激活状态
但是以及无法监听了
销毁后
// 销毁后
destroyed(){
console.log(‘Destoryed’);
console.log(this);
}
watcher 激活状态已经成了 false
销毁阶段做了什么事
- 调用 vm.$destroy()（进入销毁阶段）
- 调用 beforeDestroy() 钩子函数（此时 Vue 实例还在，虽然 vm 上的监视器、子组件、事件监听器还在，但是无法使用了，此时修改 data 也不会重新渲染页面了）
- 卸载子组件和监视器，解绑事件监听器
- 调用 destroyed() 钩子函数（此时 Vue 实例还在，只是空间还未释放，销毁后指的是 vm 对象身上所有的东西已经解绑完成）
该阶段适合做什么
beforeDestroy: 适合作销毁前的准备工作
原文地址: 【Vue】生命周期一文详解
