页面
<template> <div class=""> <TestComponent></TestComponent> </div> </template> <script> // created at 2022-03-02 import TestComponent from './test-component.vue'; export default { name: 'index', components: { TestComponent, }, beforeCreate() { console.log('page beforeCreate'); }, created() { console.log('page created'); }, beforeMount() { console.log('page beforeMount'); }, mounted() { console.log('page mounted'); }, beforeUpdate() { console.log('page beforeUpdate'); }, updated() { console.log('page updated'); }, activated() { console.log('page activated'); }, deactivated() { console.log('page deactivated'); }, beforeDestroy() { console.log('page beforeDestroy'); }, destroyed() { console.log('page destroyed'); }, errorCaptured() { console.log('page errorCaptured'); }, }; </script> <style lang="less"> </style> <style lang="less" scoped> </style>
组件
<template> <div class=""> </div> </template> <script> // created at 2022-03-02 export default { name: 'test-component', beforeCreate() { console.log('component beforeCreate'); }, created() { console.log('component created'); }, beforeMount() { console.log('component beforeMount'); }, mounted() { console.log('component mounted'); }, beforeUpdate() { console.log('component beforeUpdate'); }, updated() { console.log('component updated'); }, activated() { console.log('component activated'); }, deactivated() { console.log('component deactivated'); }, beforeDestroy() { console.log('component beforeDestroy'); }, destroyed() { console.log('component destroyed'); }, errorCaptured() { console.log('component errorCaptured'); }, }; </script> <style lang="less"> </style> <style lang="less" scoped> </style>
输出结果
page beforeCreate page created page beforeMount component beforeCreate component created component beforeMount component mounted page mounted
总体逻辑:
先创建父组件,再创建子组件,挂载子组件到父组件上