一、Vue 生命周期
1. 生命周期： 其他叫法
又名：生命周期回调函数、生命周期函数、生命周期钩子。
2. 什么是生命周期？
Vue 在关键时刻帮我们调用的一些特殊名称的函数。
3. 生命周期的 this 指向
生命周期函数中的 this 指向是 vm 或 组件实例对象。
4. 注意事项
生命周期函数的名字不可以更改，但函数的具体内容是程序员根据需求编写的。
5. 实例：使用 mounted() 过渡效果
实例：实现内容自动淡入淡出效果。
<div id="root"> <h3 :style="{opacity}">生命周期钩子</h3> </div> const vm = new Vue({ el: '#root', data: function () { return { opacity: 1 } }, mounted() { setInterval(() => { this.opacity -= 0.01 if(this.opacity <= 0) this.opacity = 1 }, 18) } })
二、分析生命周期
1. beforeCreate()
在实例初始化之后，进行数据侦听和事件/侦听器的配置之前同步调用。
2. created()
在实例创建完成后被立即同步调用。
- 在这一步中，实例已完成对选项的处理，意味着以下内容已被配置完毕：数据侦听、计算属性、方法、事件/侦听器的回调函数。
- 然而，挂载阶段还没开始，且
$elproperty 目前尚不可用。
3. beforeMount()
在挂载开始之前被调用：相关的 render 函数首次被调用。
该钩子在服务器端渲染期间不被调用
4. mounted()
- 实例被挂载后调用，这时 el 被新创建的 vm.$el 替换了。
- 如果根实例挂载到了一个文档内的元素上，当 mounted 被调用时 vm.$el 也在文档内。
- 注意 mounted 不会保证所有的子组件也都被挂载完成。
5. beforeUpdate()
在数据发生改变后，DOM 被更新之前被调用。
- 这里适合在现有 DOM 将要被更新之前访问它，比如移除手动添加的事件监听器。
- 该钩子在服务器端渲染期间不被调用，因为只有初次渲染会在服务器端进行。
6. updated()
在数据更改导致的虚拟 DOM 重新渲染和更新完毕之后被调用。
当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。
然而在大多数情况下，你应该避免在此期间更改状态。如果要相应状态改变，通常最好使用 计算属性 或 watcher 取而代之。
7. beforeDestory()
实例销毁之前调用。在这一步，实例仍然完全可用。
该钩子在服务器端渲染期间不被调用。
8. destoryed()
实例销毁后调用。
该钩子被调用后，对应 Vue 实例的所有指令都被解绑，所有的事件监听器被移除，所有的子实例也都被销毁。
该钩子在服务器端渲染期间不被调用。
<div id="root"> <h3>当前的n值是：{{n}}</h3> <button @click="add">点我 n+1</button> <button @click="bye">带点我销毁 vm</button> </div> const vm = new Vue({ el: '#root', data: function () { return { n: 1 } }, methods: { add() { console.log('add') this.n++ }, bye() { console.log('bye') this.$destroy() } }, beforeCreate() { console.log('beforeCreate') }, created() { console.log('created') }, beforeMount() { console.log('beforeMount') }, mounted() { console.log('mounted') }, beforeUpdate() { console.log('beforeUpdate') }, updated() { console.log('updated') }, beforeDestroy() { console.log('beforeDestroy') }, destroyed() { console.log('destroyed') } })
https://www.bilibili.com/video/BV1Z5411R7Nb?t=6.2
生命周期
三、总结生命周期
1. 常用生命周期钩子
- mounted：发送 ajax 请求、启动定时器、绑定自定义事件、订阅消息等【初始化操作】
- beforeDestroy：清除定时器、解绑自定义事件、取消订阅信息【收尾工作】
2. 关于销毁 Vue 实例
- 销毁后借助 Vue 开发者工具看不到任何信息。
- 销毁后自定义事件会失效，但原生 DOM 事件依然有效。
- 一般不会在 beforeDest
ory操作数据，因为即便操作数据，也不会再触发更新流程了。
<div id="root"> <h3 :style="{opacity}">生命周期钩子</h3> <button @click="opacity = 1">透明度设置为 1</button> <button @click="stop">点我停止变换</button> </div> const vm = new Vue({ el: '#root', data: function () { return { opacity: 1 } }, methods: { stop(){ this.$destroy() } }, mounted(){ console.log('mounted', this) this.timer = setInterval(() => { console.log('setInterval') this.opacity -= 0.01 if(this.opacity <= 0) this.opacity = 1 }, 16) }, beforeDestroy() { console.log('vm即将被干掉！') clearInterval(this.timer) } })
https://www.bilibili.com/video/BV1tY4y1C7zJ?t=2.0
生命周期钩子
四、生命周期钩子图解
不积跬步无以至千里 不积小流无以成江海
