这是我参与8月更文挑战的第12天，活动详情查看：8月更文挑战
介绍
每个 Vue 实例/组件在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中的某些阶段也会运行一些特定的函数,这些函数就被叫做生命周期钩子，这给了用户在不同阶段添加自己的代码的机会。
下面是Vue生命周期图示
生命周期钩子函数详解
*beforeCreate
在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。该生命周期中无法访问data，计算属性，props
new Vue({
el: '#app',
data: {
name: '小明',
age: 18
},
beforeCreate() {
console.log(
'组件被实例化后触发,但是该生命周期阶段数据还没有初始化完成',
this,
this.$data // undefined
)
}
})
created
在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测 (data observer)，property 和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，$el property 目前尚不可用。(在这个生命周期中不要操作页面中DOM元素,因为元素还没有被渲染出来)
new Vue({
el: '#app',
data: {
name: '小明',
age: 18
},
created() {
console.log(
'组件被实例化后触发,data/计算属性/watch/methods已经配置完成,这里可以执行一些初始网络请求操作',
this,
this.$data
)
this.getDataFromServer()
},
methods: {
getDataFromServer() {
console.log('开启网络请求,向服务器请求数据')
}
}
})
*beforeMount
在挂载(渲染)开始之前被调用：相关的 render 函数首次被调用。
mounted
实例被挂载后调用，这时 el 被新创建的 vm.$el 替换了。如果根实例挂载到了一个文档内的元素上，当 mounted 被调用时 vm.$el 也在文档内。
注意：mounted 不会保证所有的子组件也都一起被挂载。如果你希望等到整个视图都渲染完毕，可以在 mounted 内部使用 vm.$nextTick：
new Vue({
el: '#app',
data: {
name: '小明',
age: 18
}
beforeMount() {
console.log('实例将要被渲染',this.$refs) // this.$refs空对象
},
mounted() {
console.log('组件挂载完毕,挂载的意思就是实例第一次渲染完成,这里是一个操作DOM的好时机', this.$refs)
//this.$refs元素已经获取完毕
this.$nextTick(()=> {
// 这里所有子组件全部挂载完毕
})
}
})
beforeUpdate
数据更新时调用，发生在虚拟 DOM更新渲染之前。这里适合在更新之前访问现有的 DOM，比如手动移除已添加的事件监听器。
updated
由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在DOM更新渲染之后会调用该钩子。 当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。
然而在大多数情况下，你应该避免在此期间更改状态。如果要相应状态改变，通常最好使用计算属性或 watcher 取而代之。
注意：updated 不会保证所有的子组件也都一起被重绘。如果你希望等到整个视图都重绘完毕，可以在 updated 里使用 vm.$nextTick：
new Vue({
el: '#app',
data: {
name: '小明',
age: 18
}
beforeUpdate() {},
updated: function () {
// 不能保证所有子组件更新完毕
this.$nextTick(function () {
//保证所有子组件更新完毕
})
}
})
beforeDestroy
实例销毁之前调用。在这一步，实例仍然完全可用。(在该生命周期中我们仍然可以访问,实例对象的属性 方法 计算属性 DOM节点等)。该生命周期中应该去做一些清理工作如：解绑计时器，取消网络请求，清理掉哪些原生事件监听或者在mounted阶段创建DOM节点
new Vue({
el: '#app',
data: {
name: '小明',
age: 18,
index: 0
},
mounted() {
// 模拟启动轮播图
this.timer = setInterval(() => {
this.index++
}, 1000);
},
beforeDestroy() {
// 解绑计时器
clearInterval(this.timer)
}
})
*destroyed
实例销毁后调用。该钩子被调用后，对应 Vue 实例的所有指令都被解绑，所有的事件监听器被移除，所有的子实例也都被销毁。
activated
被 keep-alive 缓存的组件激活时调用。
deactivated
被 keep-alive 缓存的组件停用时调用。
<div id="app">
<keep-alive>
<component :is="show? 'demo': 'test'"></component>
</keep-alive>
<button @click="show = !show">show/hidden</button>
</div>
<script>
new Vue({
el: '#app',
data: {
show: true
},
components: {
demo: {
template: '<div>我是一个demo组件</div>',
mounted() {
console.log('组件第一次挂载完毕')
},
beforeDestroy() {
console.log('组件将要被销毁')
},
activated() {
console.log('demo组件被激活')
},
deactivated() {
console.log('demo组件被停用')
}
},
test: {
template: '<h2 @click="count++">count{{count}}</h2>',
data() {
return {
count: 7
}
},
activated() {
console.log('test组件被激活')
},
deactivated() {
console.log('test组件被停用')
}
}
}
})
</script>
结尾
今天就先到这里啦！我们下期再见！码字不易，觉得不错的可以动动小指头点点赞啥的哟~
系列文章
Vue系列
- Vue配置起步（一）
- Vue事件绑定（二）
- Vue渲染指令（三）
- Vue动画过渡（四）
- Vue - Todo案例（五）
- Vue表单数据绑定、Ref（六）
- Vue计算属性以及侦听器（七）
- Vue组件（八）
- Vue生命周期（九）
- Vue插槽&过滤器（十）
- Vue的反向传值 ($emit事件)
