Vue.js 是一款流行的前端框架，它采用组件化的开发模式，将页面拆分成多个组件，便于开发和维护。在 Vue.js 中，组件有自己的生命周期，包括创建、更新和销毁阶段。而在父子组件的关系中，父组件和子组件的生命周期有着不同的调用顺序和时机。本文将详细介绍 Vue.js 中父子组件的生命周期，帮助开发者更好地理解组件之间的关系和交互。
父组件的生命周期
父组件是包含子组件的容器，它的生命周期包括：
beforeCreate
在父组件实例化之前调用，此时父组件的 data 和 methods 还未初始化。
created
在父组件实例化完成之后调用，此时父组件的 data 和 methods 已经初始化。但是子组件还未被创建。
beforeMount
在父组件挂载到页面之前调用，此时子组件已经被创建，但还未被挂载到父组件中。
mounted
在父组件挂载到页面之后调用，此时父组件和子组件都已经被挂载到页面中，可以进行 DOM 操作。
beforeUpdate
在父组件数据更新之前调用，此时父组件的数据已经发生了变化，但还未渲染到页面上。
updated
在父组件数据更新之后调用，此时父组件的数据已经渲染到页面上，可以进行 DOM 操作。
beforeDestroy
在父组件销毁之前调用，此时父组件还存在，但子组件已经被销毁。
destroyed
在父组件销毁之后调用，此时父组件和子组件都已经被销毁，不再存在于页面中。
子组件的生命周期
子组件是被父组件包含的组件，它的生命周期包括：
beforeCreate
在子组件实例化之前调用，此时子组件的 data 和 methods 还未初始化。
created
在子组件实例化完成之后调用，此时子组件的 data 和 methods 已经初始化。
beforeMount
在子组件挂载到页面之前调用，此时子组件还未被挂载到父组件中。
mounted
在子组件挂载到页面之后调用，此时子组件已经被挂载到父组件中，可以进行 DOM 操作。
beforeUpdate
在子组件数据更新之前调用，此时子组件的数据已经发生了变化，但还未渲染到页面上。
updated
在子组件数据更新之后调用，此时子组件的数据已经渲染到页面上，可以进行 DOM 操作。
beforeDestroy
在子组件销毁之前调用，此时子组件还存在于父组件中。
destroyed
在子组件销毁之后调用，此时子组件已经从父组件中移除，不再存在于页面中。
父子组件的生命周期
父组件和子组件之间的生命周期存在一定的交互关系，具体表现如下：
beforeCreate
在父组件和子组件都还未实例化时调用。
created
在父组件和子组件都实例化完成后调用。
beforeMount
在父组件挂载到页面之前调用，此时子组件已经被创建，但还未被挂载到父组件中。
mounted
在父组件挂载到页面之后调用，此时父组件和子组件都已经被挂载到页面中。
beforeUpdate
在父组件和子组件数据更新之前调用。
updated
在父组件和子组件数据更新之后调用。
beforeDestroy
在父组件和子组件销毁之前调用，此时子组件还存在于父组件中。
destroyed
在父组件和子组件销毁之后调用，此时父组件和子组件都已经被销毁，不再存在于页面中。
示例代码
下面是一个简单的父子组件示例，展示了父组件和子组件的生命周期调用顺序：
// www.javascriptcn.com code example
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue.js 父子组件生命周期示例</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<h1>父组件</h1>
<p>父组件数据：{{ message }}</p>
<button @click="updateMessage">更新数据</button>
<child-component :child-message="message"></child-component>
</div>
<script>
// 子组件
var childComponent = {
props: ['childMessage'],
template: '<div><h2>子组件</h2><p>子组件数据：{{ childMessage }}</p></div>',
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');
}
};
// 父组件
var app = new Vue({
el: '#app',
components: {
'child-component': childComponent
},
data: {
message: 'Hello, Vue.js!'
},
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');
},
methods: {
updateMessage: function () {
this.message = 'Hello, World!';
}
}
});
</script>
</body>
</html>以上代码中，父组件和子组件的生命周期函数都输出了对应的调用信息，可以在控制台中查看。同时，父组件中的数据 message 通过 props 传递给了子组件，实现了父子组件之间的数据交互。开发者可以根据自己的需求和业务逻辑，灵活使用组件的生命周期函数，实现更加高效和优雅的开发。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d543bca941bf71349bae85