刷刷题14

拉不动的猪
145 阅读4分钟

vue事件总线的原理

Vue事件总线（EventBus）是一种实现组件之间通信的自定义事件处理系统。它基于Vue实例的$emit、$on和$off方法，允许任意组件通过事件总线来发送和接收消息，从而实现了跨组件通信的目的。事件总线就像一个中央事件管理器，组件可以注册监听事件，也可以触发事件，而且还可以通过事件传递数据。以下是Vue事件总线原理的详细解释：

  1. ‌事件总线的创建‌：

    • 在Vue中，可以创建一个新的Vue实例作为事件总线。这个实例不挂载到DOM上，只用于管理事件。它本质上是一个空的Vue实例，仅用于提供$emit、$on和$off等事件处理方法。

  2. ‌事件的发布‌：

    • 组件通过调用事件总线的$emit方法来触发事件，并可以传递数据作为事件的参数。例如，bus.$emit('custom-event', 'Hello from Component A!');这行代码表示在事件总线上触发了一个名为custom-event的事件，并传递了一个字符串作为数据。

  3. ‌事件的订阅‌：

    • 组件通过调用事件总线的$on方法来监听事件。当事件被触发时，相应的回调函数将被执行。例如，bus.$on('custom-event', (message) => { console.log(message); });这行代码表示在事件总线上监听了一个名为custom-event的事件，并定义了一个回调函数来处理接收到的数据。

  4. ‌事件的解绑‌：

    • 在组件销毁时，应调用事件总线的$off方法来取消对事件的监听，防止内存泄漏。例如，bus.$off('custom-event');这行代码表示取消对custom-event事件的监听。

  5. ‌全局事件总线‌：

    • 除了在项目中单独创建一个事件总线文件外，还可以将事件总线安装在Vue的原型上，使其成为全局事件总线。这样做的好处是每个组件都可以直接通过this.$bus访问事件总线。

  6. ‌事件总线的优缺点‌：

    • ‌优点‌：提供了一种灵活的方式来实现组件间的通信，特别是在跨越层级的组件通信时，事件总线可以大大简化代码。
    • ‌缺点‌：可能导致代码难以追踪和维护，增加组件之间的耦合度。因此，应谨慎使用事件总线，尽量在组件关系复杂且传统通信方式不适用的情况下使用。

  7. ‌使用场景‌：

    • 事件总线适用于需要跨组件通信但又不适合使用Vuex或Provide/Inject等更高级状态管理方案的场景。然而，为了避免事件名的冲突和代码维护的复杂性，建议在使用事件总线时采用命名空间来组织事件。

总的来说，Vue事件总线是一种强大的工具，可以帮助开发者在Vue应用中实现组件间的通信。然而，它也需要谨慎使用，以避免潜在的维护和性能问题。

当然可以。下面是一个简单的Vue事件总线例子：

首先，创建一个事件总线实例，通常在一个单独的文件中，如event-bus.js：

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

然后，在Vue的主入口文件（如main.js）中，你可以将这个事件总线实例挂载到Vue的原型上，以便在全局范围内使用：

// main.js
import Vue from 'vue';
import App from './App.vue';
import { EventBus } from './event-bus';

Vue.prototype.$bus = EventBus;

new Vue({
  render: h => h(App),
}).$mount('#app');

接下来，在组件中使用事件总线。比如，有一个组件A想要发送一个事件，组件B想要接收这个事件：

‌组件A（发送事件） ‌：

// ComponentA.vue
<template>
  <button @click="sendMessage">Send Message</button>
</template>

<script>
export default {
  methods: {
    sendMessage() {
      this.$bus.$emit('messageEvent', 'Hello from ComponentA');
    }
  }
}
</script>

‌组件B（接收事件） ‌：

// ComponentB.vue
<template>
  <div>{{ message }}</div>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    };
  },
  created() {
    this.$bus.$on('messageEvent', (msg) => {
      this.message = msg;
    });
  },
  beforeDestroy() {
    this.$bus.$off('messageEvent');
  }
}
</script>

在这个例子中，当点击组件A中的按钮时，它会通过事件总线触发一个名为messageEvent的事件，并传递消息'Hello from ComponentA'。组件B在创建时会监听这个事件，并在事件被触发时更新自己的状态。同时，在组件B销毁前，它会移除事件监听，以避免内存泄漏。这样，即使组件A和组件B没有直接的父子关系，它们也可以通过事件总线进行通信2。

简单介绍下计算属性的原理

Vue计算属性的原理可以概括为以下几点：

  1. ‌依赖追踪‌：

    • Vue通过Object.defineProperty()（在Vue 3.x中使用的是Proxy）来定义响应式数据的getter和setter。
    • 当计算属性被访问时，Vue会记录其所依赖的数据属性，并在这些依赖数据发生变化时重新计算计算属性的值。

  2. ‌缓存机制‌：

    • 计算属性的值会被缓存起来，只有在依赖的数据属性发生变化时才会重新计算。
    • 这避免了不必要的重复计算，提高了性能。

  3. ‌响应式更新‌：

    • 当计算属性所依赖的数据属性发生变化时，Vue会触发依赖关系，重新计算计算属性的值，并更新视图。

Vue计算属性的底层实现

下面是一个简化的Vue计算属性底层实现的示例代码，用于解释其工作原理：

function defineReactive(data, key, val) {
  const dep = new Dep();

  Object.defineProperty(data, key, {
    enumerable: true,
    configurable: true,
    get() {
      // 如果存在依赖，则添加当前依赖到依赖列表中
      if (Dep.target) {
        dep.addSub(Dep.target);
      }
      return val;
    },
    set(newVal) {
      if (newVal !== val) {
        val = newVal;
        // 通知所有依赖该数据的计算属性或观察者，触发更新
        dep.notify();
      }
    }
  });
}

class Dep {
  constructor() {
    this.subs = [];
  }

  addSub(sub) {
    this.subs.push(sub);
  }

  notify() {
    this.subs.forEach(sub => {
      sub.update();
    });
  }
}

class Watcher {
  constructor(vm, expOrFn, cb) {
    this.vm = vm;
    this.getter = expOrFn;
    this.cb = cb;
    this.value = this.get();
  }

  get() {
    // 将当前Watcher实例设置为Dep.target，以便在getter中收集依赖
    Dep.target = this;
    const value = this.getter.call(this.vm, this.vm);
    // 清空Dep.target，避免污染后续的操作
    Dep.target = null;
    return value;
  }

  update() {
    const newValue = this.getter.call(this.vm, this.vm);
    if (newValue !== this.value) {
      this.value = newValue;
      this.cb.call(this.vm, newValue, this.value);
    }
  }
}

// 示例：使用计算属性
const vm = {
  data: {
    firstName: 'John',
    lastName: 'Doe'
  },
  computed: {}
};

// 假设我们有一个计算属性 fullName
const fullNameDep = new Dep();

Object.defineProperty(vm, 'fullName', {
  get() {
    fullNameDep.depend();
    return vm.firstName + ' ' + vm.lastName;
  },
  set(newVal) {
    const [firstName, lastName] = newVal.split(' ');
    vm.firstName = firstName;
    vm.lastName = lastName;
    fullNameDep.notify();
  }
});

// 定义一个Watcher来观察fullName的变化
new Watcher(vm, () => vm.fullName, () => {
  console.log('fullName has been updated to:', vm.fullName);
});

// 模拟firstName的变化
vm.firstName = 'Jane';

// fullName的Watcher会被触发，打印更新后的fullName

解释

  1. ‌依赖追踪‌：

    • 当fullName计算属性被访问时，Vue会通过getter函数记录其所依赖的数据属性（firstName和lastName）。
    • 在getter函数中，如果存在依赖（Dep.target不为空），则会将当前依赖（Watcher实例）添加到fullName的依赖列表（fullNameDep.subs）中。

  2. ‌缓存机制‌：

    • 计算属性的值（如fullName）在第一次访问时会被计算并缓存。
    • 后续访问时，如果依赖的数据属性没有变化，则直接返回缓存的值，避免重复计算。

  3. ‌响应式更新‌：

    • 当依赖的数据属性（如firstName）发生变化时，会触发setter函数。
    • 在setter函数中，会通知所有依赖该数据的计算属性或观察者（通过fullNameDep.notify()），触发它们的更新函数（Watcher.update()）。
    • 更新函数会重新计算计算属性的值，并更新视图。
avatar
文章
阅读
粉丝