Vue3.0 生命周期与组件通信详解（二）

Vue3.0 生命周期及组件通信学习（二）

序言

在上一篇文章中，我们介绍了 Vue3.0 生命周期的新特性——组合式 API。本文将继续深入探讨生命周期钩子和组件通信，进一步领略 Vue3.0 的强大魅力。

生命周期钩子与 2.x 版本的对应关系

2.x 版本生命周期钩子	组合式 API
beforeCreate	无对应钩子
created	onCreated
beforeMount	无对应钩子
mounted	onMounted
beforeUpdate	onBeforeUpdate
updated	onUpdated
beforeDestroy	onBeforeUnmount
destroyed	onUnmounted

测试组件

为了验证组合式 API 的功能，我们新建一个测试组件：

// components/Test.vue
<script>
import { onMounted, onBeforeUnmount } from 'vue'

export default {
  setup() {
    onMounted(() => {
      console.log('组件已挂载')
    })

    onBeforeUnmount(() => {
      console.log('组件即将销毁')
    })
  },
}
</script>

组合式 API 实践

onMounted：

onMounted(() => {
  console.log('组件已挂载')
})

该钩子在组件挂载后执行，相当于 2.x 版本中的 mounted 钩子。在 onMounted 钩子中，我们打印了 "组件已挂载" 到控制台。

onBeforeUnmount：

onBeforeUnmount(() => {
  console.log('组件即将销毁')
})

该钩子在组件销毁前执行，相当于 2.x 版本中的 beforeDestroy 钩子。在 onBeforeUnmount 钩子中，我们打印了 "组件即将销毁" 到控制台。

组件通信

父组件向子组件传值：

父组件通过 props 属性向子组件传值。子组件通过 props 属性接收父组件传递的数据。

子组件向父组件传值：

子组件通过自定义事件向父组件传值。父组件通过 @ 语法监听子组件发出的事件。

兄弟组件之间通信：

兄弟组件通过 Vuex 进行通信。Vuex 是一个状态管理工具，可以存储全局共享的数据。

总结

通过组合式 API，我们可以更加灵活和优雅地控制组件的生命周期。同时，组件通信的多种方式为我们提供了丰富的选择，使构建复杂应用变得更加容易。

继续探索 Vue3.0 的更多特性，让我们的开发之旅更加精彩！

SEO 优化