2024年Web前端最全vue3 eventBus订阅发布模式_vue3 发布订阅，培训web前端开发

计算机网络

• HTTP 缓存

• 你知道 302 状态码是什么嘛？你平时浏览网页的过程中遇到过哪些 302 的场景？

• HTTP 常用的请求方式，区别和用途？

• HTTPS 是什么？具体流程

• 三次握手和四次挥手

• 你对 TCP 滑动窗口有了解嘛？

• WebSocket与Ajax的区别

• 了解 WebSocket 嘛？

• HTTP 如何实现长连接？在什么时候会超时？

• TCP 如何保证有效传输及拥塞控制原理。

• TCP 协议怎么保证可靠的，UDP 为什么不可靠？

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

算法

• 链表

• 字符串

• 数组问题

• 二叉树

• 排序算法

• 二分查找

• 动态规划

• BFS

• 栈

• DFS

• 回溯算法

  

Ⅱ. vue3 如何使用 eventBus

• vue3中没有了，eventBus，所以我们要自己写，但是非常简单。

步骤一 （eventBus 容器）

• 在src目录，创建个bus文件夹，存放 自己写的 bus.js ；
• 编写 bus.js => 在class 原型上绑定三个 （订阅，取消订阅，发布）函数；

// bus.js
class Bus {
	constructor() {
		this.list = {};  // 收集订阅
	}
	// 订阅
	$on(name, fn) {
		this.list[name] = this.list[name] || [];
		this.list[name].push(fn);
	}
	// 发布
	$emit(name, data) {
		if (this.list[name]) {
      		this.list[name].forEach((fn) => {	fn(data);   });
    	}
	}
	// 取消订阅
	$off(name) {
		if (this.list[name]) {
			delete this.list[name];
		}
	}
}
export default new Bus;

• 订阅者（on），讲函数放入 list 中 => 等待发布者（emit），传参去调用；
• 由于函数是对象，内存地址未发生变化，还在在订阅者（on）组件中执行。

步骤二 （ 订阅者 ）

• 在 comA.vue 中订阅；
• 订阅只是 存放函数，并未执行，等发布后才会执行；

<template>
  <div>
 	{{ name }} --- {{ age }}
  </div>
</template>
<script>
import {ref , onUnmounted} from 'vue';
import Bus from '../bus/bus.js';
export default {
 setup() {
 const name = '张三';
 const age = ref(18)
 Bus.$on('addAge',({ num })=>{ age.value = num; })
 
 //组件卸载时，取消订阅
 onUnmounted( () => { Bus.$off('addAge') } )
 }
 }
</script>

• 在离开组件（onUnmounted）时 ，将注册进去的 ，订阅函数的数组删除，避免存放越来越多。

react和vue的比较

相同
1）vitual dom
2）组件化
3）props，单一数据流

不同点
1）react是jsx和模板；（jsx可以进行更多的js逻辑和操作）
2）状态管理（react）
3）对象属性（vue）
4）vue：view——medol之间双向绑定
5）vue：组件之间的通信（props，callback，emit）

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**

[外链图片转存中…(img-yNkyZiNS-1714832593567)]

[外链图片转存中…(img-Nt6ojCSo-1714832593568)]