文章目录
一、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')
}
})
生命周期
三、总结生命周期
1. 常用生命周期钩子
- mounted：发送 ajax 请求、启动定时器、绑定自定义事件、订阅消息等【初始化操作】
- beforeDestroy：清除定时器、解绑自定义事件、取消订阅信息【收尾工作】
2. 关于销毁 Vue 实例
- 销毁后借助 Vue 开发者工具看不到任何信息。
- 销毁后自定义事件会失效，但原生 DOM 事件依然有效。
- 一般不会在
beforeDestory操作数据，因为即便操作数据，也不会再触发更新流程了。
<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)
}
})
生命周期钩子
四、生命周期钩子图解
不积跬步无以至千里 不积小流无以成江海