Vue3:组件的生命周期与数据共享

1、组件的生命周期

1.1 组件运行的过程

• 运行过程
• 组件的生命周期指的是：组件从创建 -> 运行（渲染） -> 销毁的整个过程，强调的是一个时间段。

1.2 如何监听组件的不同时刻

• vue 框架为组件内置了不同时刻的生命周期函数，生命周期函数会伴随着组件的运行而自动调用。例如：
     ① 当组件在内存中被创建完毕之后，会自动调用 created 函数
     ② 当组件被成功的渲染到页面上之后，会自动调用 mounted 函数
     ③ 当组件被销毁完毕之后，会自动调用 unmounted 函数

1.3 如何监听组件的更新

• 当组件的 data 数据更新之后，vue 会自动重新渲染组件的 DOM 结构，从而保证 View 视图展示的数据和Model 数据源保持一致。
• 当组件被重新渲染完毕之后，会自动调用updated 生命周期函数。

1.4 组件中主要的生命周期函数

• 生命周期函数
• 全部生命周期函数
• 完整的生命周期图示

2、组件之间的数据共享

2.1 父子组件之间的数据共享

• 父子组件之间的数据共享又分为：
     ① 父 -> 子共享数据
     ② 子 -> 父共享数据
     ③ 父 <-> 子双向数据同步

2.1.1 父组件向子组件共享数据

• 父组件通过 v-bind 属性绑定向子组件共享数据。同时，子组件需要使用 props 接收数据。示例代码如下：
  • 父组件
  • 子组件

2.1.2 子组件向父组件共享数据

• 子组件通过自定义事件的方式向父组件共享数据。示例代码如下：
  • 子组件
  • 父组件

2.1.3 父子组件之间数据的双向同步

• 父组件在使用子组件期间，可以使用 v-model 指令维护组件内外数据的双向同步：
  • 双向同步

2.2 兄弟组件之间的数据共享

• 兄弟组件之间实现数据共享的方案是 EventBus。可以借助于第三方的包 mitt 来创建 eventBus 对象，从而实现兄弟组件之间的数据共享。示意图如下：
  • 兄弟组件数据共享

2.2.1 安装 mitt 依赖包

• 在项目中运行如下的命令，安装 mitt 依赖包：
  • 安装mitt

2.2.2 创建公共的 EventBus 模块

• 在项目中创建公共的 eventBus 模块如下
  • 创建EventBus

2.2.3 在数据接收方自定义事件

• 在数据接收方，调用 bus.on('事件名称', 事件处理函数) 方法注册一个自定义事件。示例代码如下：
  • 接收数据

2.2.4 在数据接发送方触发事件

• 在数据发送方，调用 bus.emit('事件名称', 要发送的数据) 方法触发自定义事件。示例代码如下：
  • 发送数据

2.3 后代关系组件之间的数据共享

• 后代关系组件之间共享数据，指的是父节点的组件向其子孙组件共享数据。此时组件之间的嵌套关系比较复杂，可以使用 provide 和 inject 实现后代关系组件之间的数据共享。

2.3.1 父节点通过 provide 共享数据

• 父节点的组件可以通过provide 方法，对其子孙组件共享数据：
  • provide
  • provide实例

2.3.2 子孙节点通过 inject 接收数据

• 子孙节点可以使用 inject 数组，接收父级节点向下共享的数据
  • inject
  • inject实例

2.4 父节点对外共享响应式的数据

• 父节点使用 provide 向下共享数据时，可以结合computed 函数向下共享响应式的数据。示例代码如下：
  • 响应式数据
• 如果父级节点共享的是响应式的数据，则子孙节点必须以 .value 的形式进行使用。示例代码如下：
  • 子节点接收数据

2.5 vuex

• vuex 是终极的组件之间的数据共享方案。在企业级的 vue 项目开发中，vuex 可以让组件之间的数据共享变得高效、清晰、且易于维护。
  • vuex