Vue3.2 生命周期钩子函数简单分析

前言

在Vue组件库开发过程中，Vue组件之间的通信一直是一个重要的话题，虽然官方推出的 Vuex 状态管理方案可以很好的解决组件之间的通信问题，但是在组件库内部使用 Vuex 往往会比较重，本文将系统的罗列出几种不使用 Vuex，比较实用的组件间的通信方式，供大家参考。

组件之间通信的场景

在进入我们今天的主题之前，我们先来总结下Vue组件之间通信的几种场景，一般可以分为如下几种场景：

1.父子组件之间的通信
2.兄弟组件之间的通信
3.隔代组件之间的通信

父子组件之间的通信

父子组件之间的通信应该是 Vue 组件通信中最简单也最常见的一种了，概括为两个部分：父组件通过prop向子组件传递数据，子组件通过自定义事件向父组件传递数据。

父组件通过 prop 向子组件传递数据

Vue组件的数据流向都遵循单向数据流的原则，所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外变更父级组件的状态，从而导致你的应用的数据流向难以理解。

额外的，每次父级组件发生变更时，子组件中所有的 prop 都将会刷新为最新的值。这意味着你不应该在一个子组件内部改变 prop。如果你这样做了，Vue 会在浏览器的控制台中发出警告。

父组件 ComponentA：

<template><div><component-b title="welcome"></component-b></div>
</template>
<script> import ComponentB from './ComponentB'

export default {name: 'ComponentA',components: {ComponentB}
} </script> 

子组件 ComponentB:

<template><div><div>{
  {title}}</div></div>
</template>
<script> export default {name: 'ComponentB',props: {title: {type: String,}}
} </script> 

子组件通过自定义事件向父组件传递数据

在子组件中可以通过 $emit 向父组件发生一个事件，在父组件中通过 v-on/@ 进行监听。

子组件 ComponentA：

<template><div><component-b :title="title" @title-change="titleChange"></component-b></div>
</template>
<script> import ComponentB from './ComponentB'

export default {name: 'ComponentA',components: {ComponentB},data: {title: 'Click me'},methods: {titleChange(newTitle) {this.title = newTitle} }
} </script> 

子组件 ComponentB:

<template><div><div @click="handleClick">{
  {title}}</div></div>
</template>
<script> export default {name: 'ComponentB',props: {title: {type: String,}},methods: {handleClick() {this.$emit('title-change', 'New title !')}}
} </script> 

这个例子非常简单，在子组件 ComponentB 里面通过 $emit 派发一个事件 title-change，在父组件 ComponentA 通过 @title-change 绑定的 titleChange 事件进行监听，ComponentB 向 ComponentA 传递的数据在 titleChange 函数的传参中可以获取到。

兄弟组件之间的通信

状态提升

写过 React 的同学应该对组件的 状态提升 概念并不陌生，React 里面将组件按照职责的不同划分为两类：展示型组件(Presentational Component) 和 容器型组件(Container Component)。

展示型组件不关心组件使用的数据是如何获取的，以及组件数据应该如何修改，它只需要知道有了这些数据后，组件UI是什么样子的即可。外部组件通过 props 传递给展示型组件所需的数据和修改这些数据的回调函数ÿ