Vue 生命周期、绑定加冒号与不加的区别、总线机制、$bus 事件总线与 $emit、$on 关系

前端

2024-02-06 11:07:29

在 Vue.js 开发中，理解和掌握生命周期钩子、属性绑定方式、以及组件间的通信机制是至关重要的。本文将深入探讨 Vue 的生命周期、绑定加冒号与不加的区别、总线机制、bus 事件总线与 emit、$on 的关系，并提供相应的代码示例。

Vue 生命周期

Vue 组件的生命周期可以分为几个主要阶段：创建、挂载、更新和销毁。每个阶段都有对应的生命周期钩子，允许开发者在特定时刻执行代码。

初始化阶段：
- beforeCreate：实例初始化后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
- created：实例创建完成后被调用，此时已完成数据观测，属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。
挂载阶段：
- beforeMount：在挂载开始之前被调用，相关的 render 函数首次被调用。
- mounted：实例被挂载后调用，这时 el 被新创建的 vm.$el 替换，挂载成功。
更新阶段：
- beforeUpdate：数据更新时调用，发生在虚拟 DOM 打补丁之前。
- updated：由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。
销毁阶段：
- beforeDestroy：实例销毁之前调用。在这一步，实例仍然完全可用。
- destroyed：实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。

绑定加冒号与不加的区别

在 Vue 中，v-bind 指令用于动态地绑定一个或多个属性，或一个组件的 prop 到表达式。当使用 v-bind 时，可以省略 v-bind: 前缀，直接使用冒号 :。

不加冒号：表示绑定的值是字符串。
```
<img src="image.png">
```
加冒号：表示绑定的值是一个 JavaScript 表达式。
```
<img :src="imageSrc">
```

总线机制

总线机制是一种用于 Vue 组件间通信的设计模式，通过创建一个全局的事件总线，组件可以发送和接收事件，从而实现跨组件的通信。

bus 事件总线与 emit、$on 关系

$bus 是一个 Vue 实例，用作中央事件总线，允许任何组件触发和监听事件。$emit 和 $on 是 Vue 实例的方法，用于事件的触发和监听。

$emit：用于触发当前实例上的事件，可以传递参数给监听该事件的函数。
$on：用于监听当前实例上自定义事件的触发。

// main.js
import Vue from 'vue';
export const bus = new Vue();

// ComponentA.vue
import { bus } from './main.js';
export default {
  methods: {
    sendMessage() {
      bus.$emit('message', 'Hello from ComponentA!');
    }
  }
};

// ComponentB.vue
import { bus } from './main.js';
export default {
  created() {
    bus.$on('message', (msg) => {
      console.log(msg); // 'Hello from ComponentA!'
    });
  }
};