加载渲染阶段
- 当一个Vue组件被创建并渲染时，首先执行父组件的
beforeCreate钩子。这个阶段，组件实例刚刚被创建，数据观测（data observer）和事件/生命周期还没有被初始化。 - 接着执行父组件的
created钩子。此时，组件实例已经完成创建，数据观测、属性和方法的运算，watch/event事件回调都已经配置好，但是模板（template）还没有被渲染成HTML。 - 然后父组件开始编译模板，在挂载之前，会先执行
beforeMount钩子。此时，模板已经编译好，但是还没有被挂载到真实的DOM节点上。 - 父组件挂载到真实DOM节点后，执行
mounted钩子。这时候，组件已经被渲染到页面上，并且可以访问到真实的DOM元素，通常在这里可以进行一些DOM操作，比如获取元素的高度、宽度等。 - 当父组件挂载完成后，如果有子组件，会开始创建和渲染子组件。子组件同样会先执行
beforeCreate、created、beforeMount这些钩子，和父组件的执行逻辑类似。 - 在子组件挂载时，会先执行子组件的
mounted钩子，然后父组件的mounted钩子才算全部完成。因为子组件的挂载是在父组件挂载过程中的一部分。
- 当一个Vue组件被创建并渲染时，首先执行父组件的
更新阶段
- 当组件的数据发生变化时，会触发更新过程。首先执行父组件的
beforeUpdate钩子。这个阶段，组件的DOM还没有被更新，但是数据已经发生了变化，此时可以在这个钩子中获取到更新前的数据状态。 - 然后更新子组件，子组件同样会先执行
beforeUpdate钩子。 - 子组件完成DOM更新后，会执行子组件的
updated钩子。 - 最后父组件完成DOM更新后，执行父组件的
updated钩子。
- 当组件的数据发生变化时，会触发更新过程。首先执行父组件的
销毁阶段
- 当父组件被销毁时，先执行父组件的
beforeDestroy钩子。在这个阶段，组件实例仍然完全可用，此时可以进行一些清理工作，比如清除定时器、取消订阅等。 - 然后销毁子组件，子组件会执行
beforeDestroy和destroyed钩子。 - 最后父组件执行
destroyed钩子，组件的所有实例都被销毁，释放内存等资源。
- 当父组件被销毁时，先执行父组件的
示例代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF - 8">
<title>Vue Lifecycle</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
<div id="app">
<child - component></child - component>
</div>
<script>
Vue.component('child - component', {
template: '<div>Child Component</div>',
beforeCreate() {
console.log('Child beforeCreate');
},
created() {
console.log('Child created');
},
beforeMount() {
console.log('Child beforeMount');
},
mounted() {
console.log('Child mounted');
},
beforeUpdate() {
console.log('Child beforeUpdate');
},
updated() {
console.log('Child updated');
},
beforeDestroy() {
console.log('Child beforeDestroy');
},
destroyed() {
console.log('Child destroyed');
}
});
var app = new Vue({
el: '#app',
beforeCreate() {
console.log('Parent beforeCreate');
},
created() {
console.log('Parent created');
},
beforeMount() {
console.log('Parent beforeMount');
},
mounted() {
console.log('Parent mounted');
},
beforeUpdate() {
console.log('Parent beforeUpdate');
},
updated() {
console.log('Parent updated');
},
beforeDestroy() {
console.log('Parent beforeDestroy');
},
destroyed() {
console.log('Parent destroyed');
}
});
</script>
</body>
</html>
在这个示例中，当页面加载时，可以在控制台看到组件生命周期钩子的执行顺序。如果数据发生变化或者组件被销毁，也可以看到相应钩子的执行顺序。
