Vue生命周期是指Vue实例从创建到销毁的整个过程中,会自动执行一系列的钩子函数,这些钩子函数可以在不同的阶段进行一些操作,比如初始化数据、挂载DOM、更新数据等。
Vue生命周期分为8个阶段,分别是:
1. beforeCreate:在实例初始化之后,数据观测和事件配置之前被调用,此时data和methods等属性还未初始化。
2. created:在实例创建完成后被立即调用,此时已经完成了数据观测和属性计算,但是还没有挂载到DOM上。
3. beforeMount:在挂载开始之前被调用,此时模板编译已经完成,但是还没有挂载到DOM上。
4. mounted:在挂载完成之后被调用,此时实例已经挂载到DOM上,可以进行DOM操作。
5. beforeUpdate:在数据更新之前被调用,此时数据还没有更新,但是DOM已经重新渲染。
6. updated:在数据更新之后被调用,此时数据和DOM都已经更新完成。
7. beforeDestroy:在实例销毁之前被调用,此时实例还没有销毁,但是已经解除了事件监听和子组件的引用关系。
8. destroyed:在实例销毁之后被调用,此时实例已经销毁,所有的事件监听和子组件的引用关系都已经解除。
代码实现步骤:
1. 创建Vue实例,并在options中定义各个生命周期函数。
2. 在各个生命周期函数中编写需要执行的代码。
3. 在页面中引入Vue实例,并将其挂载到指定的DOM元素上。
4. 在Vue实例中修改数据,观察各个生命周期函数的执行情况。
示例代码:
“`
<!DOCTYPE html>
<html>
<head>
<title>Vue生命周期</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<p>{{ message }}</p>
</div>
<script>
var vm = new Vue({
el: ‘#app’,
data: {
message: ‘Hello, Vue!’
},
beforeCreate: function() {
console.log(‘beforeCreate’);
},
created: function() {
console.log(‘created’);
},
beforeMount: function() {
console.log(‘beforeMount’);
},
mounted: function() {
console.log(‘mounted’);
},
beforeUpdate: function() {
console.log(‘beforeUpdate’);
},
updated: function() {
console.log(‘updated’);
},
beforeDestroy: function() {
console.log(‘beforeDestroy’);
},
destroyed: function() {
console.log(‘destroyed’);
}
});
vm.message = ‘Hello, World!’;
</script>
</body>
</html>
“`
在控制台中可以看到各个生命周期函数的执行情况。