前端5月28日 03:20
什么是 MVVM 模式？它是为了解决什么问题？MVVM 是 Model-View-ViewModel 的缩写，是一种将 UI 表现层与业务逻辑层分离的架构模式。三层的职责：
- **Model**：数据与业务逻辑，包括数据模型、API 请求、数据校验等
- **View**：UI 展示层，负责渲染界面和接收用户交互
- **ViewModel**：连接 Model 与 View 的桥梁，通过数据绑定让两者自动同步
MVVM 要解决的核心问题是 **View 与 Model 之间的直接耦合**。在传统 MVC 中，View 可能直接读取 Model 数据，Model 变化后手动通知 View 更新，随着业务增长，Controller 膨胀成 Massive View Controller，View 和 Model 互相引用导致维护困难。MVVM 通过 ViewModel 把两者彻底解耦——View 只依赖 ViewModel，Model 完全不知道 View 的存在，通信通过数据绑定自动完成。
Vue 是典型的 MVVM 实践：template 是 View，data/computed 是 Model，Vue 实例充当 ViewModel。通过响应式系统（Vue 2 的 Object.defineProperty / Vue 3 的 Proxy）拦截数据变化，配合模板编译和虚拟 DOM diff，实现 View 与 Model 的自动同步，开发者不再需要手动操作 DOM。
## 双向绑定的实现原理
双向绑定是 MVVM 的核心机制，Vue 的实现分为三个关键部分：
1. **数据劫持（Observer）**：递归遍历 data 对象，用 Object.defineProperty（Vue 2）或 Proxy（Vue 3）拦截属性的 get/set，每个属性对应一个 Dep（依赖收集器）
2. **模板编译（Compiler）**：解析模板中的指令（v-model、插值语法、v-bind 等），为每个绑定创建一个 Watcher
3. **依赖收集与派发更新（Watcher + Dep）**：get 时收集依赖（Watcher 订阅 Dep），set 时通知 Dep 派发更新，Watcher 触发视图重新渲染
以 v-model 为例：编译时为 input 元素添加 input 事件监听，用户输入时将值赋给数据属性（View 到 Model）；同时为该属性创建 Watcher，属性变化时更新 input 的 value（Model 到 View），由此形成双向数据流。
## MVVM 与 MVC、MVP 的区别
| 对比项 | MVC | MVP | MVVM |
|--------|-----|-----|------|
| 通信方式 | View 和 Model 可直接通信 | View 和 Model 通过 Presenter 通信 | View 和 Model 通过 ViewModel + 数据绑定通信 |
| 中间层职责 | Controller 处理路由和输入 | Presenter 包含业务逻辑 | ViewModel 暴露视图状态 |
| View 与 Model 耦合 | 可能直接引用 | 完全解耦 | 完全解耦 |
| 手动同步 | 需要手动更新 View | Presenter 手动调用 View 接口 | 数据绑定自动同步 |
| 可测试性 | 较低 | 较高 | 最高（ViewModel 无 UI 依赖） |
MVC 适合服务端渲染场景（如 Rails），MVP 适合 Android 早期开发，MVVM 适合数据驱动的 UI 框架（Vue、WPF）。选择哪种模式取决于项目复杂度和框架特性。
## Vue 严格来说是 MVVM 吗？
不完全。尤雨溪明确表示 Vue 受 MVVM 启发但不是严格的 MVVM 实现，原因如下：
- **Model 不是独立层**：Vue 的 Model 是普通 JS 对象（data），而非独立的领域模型抽象
- **ViewModel 不是独立可测试层**：Vue 实例同时包含响应式数据、生命周期钩子、方法等，与组件耦合
- **提供了 $refs**：$refs 允许直接操作 DOM 子组件，打破了 ViewModel 与 View 的隔离原则
- **组件化优先于架构模式**：Vue 的核心思想是组件化组合而非严格的分层架构
所以 Vue 更准确的定位是响应式组件化框架，MVVM 只是它的灵感来源和教学标签。
## 为什么现在新框架很少强调 MVVM 了？
因为框架的竞争维度变了：
- **2012-2016 年**：框架竞争点是架构模式——AngularJS 推 MVC，Knockout 推 MVVM，Backbone 推 MVP，开发者需要被教怎么组织代码
- **2016 年至今**：架构模式已成共识，竞争点转向组件化、响应式粒度、编译优化、开发体验。React Hooks 让函数式组件替代 Class，Vue 3 Composition API 让逻辑复用更灵活，Svelte 用编译时抹掉运行时
MVVM 作为概念依然存在（数据绑定仍是所有现代框架的基石），但不再是框架的卖点，而成了底层实现细节。面试中被问到时，重点是理解其解决耦合问题的思路，而非背诵定义。
## 追问
### MVVM 的缺点是什么？
1. **调试困难**：数据绑定是隐式的，数据流向不如命令式代码直观，Bug 定位需要追踪绑定链路
2. **内存开销**：每个绑定都创建 Watcher，大量绑定会占用更多内存
3. **过度绑定风险**：双向绑定容易导致数据流混乱，特别是跨组件通信时状态变更难以追溯
4. **不适合简单 UI**：对于静态展示页面，引入 MVVM 框架是过度设计
### Vue 3 为什么从 Object.defineProperty 改用 Proxy？
Object.defineProperty 有三个缺陷：
- 无法监听属性的新增和删除（所以 Vue 2 需要 Vue.set / Vue.delete）
- 无法监听数组索引和 length 变化（Vue 2 通过重写数组方法修补）
- 需要递归遍历对象的每个属性，初始化性能差
Proxy 可以代理整个对象，一次性解决以上所有问题，且是惰性响应式（只在访问时才递归代理子对象），初始化性能更好。这也是 Vue 3 大型项目性能提升的关键因素之一。
### 面试中如何简洁地回答什么是 MVVM？
三句话结构：
1. MVVM 是 Model-View-ViewModel 架构模式，通过 ViewModel 的数据绑定让 View 和 Model 自动同步
2. 它解决了传统 MVC 中 View 和 Model 直接耦合的问题，用 ViewModel 把两者彻底解耦
3. Vue 是典型实践，通过响应式系统拦截数据变化配合模板编译实现双向绑定，但 Vue 并非严格 MVVM（有 $refs 等例外）标签
Vue
Vue.js（简称 Vue）是一种开源的轻量级 JavaScript 框架，由 Evan You 于2014年首次发布。Vue 致力于在用户界面（UI）开发中实现数据与视图的双向绑定，为创建现代化 Web 应用、单页面应用（SPA）以及多种复杂界面提供了一种简洁、高效且可扩展的解决方案。 #### 核心特性 - **组件化：** Vue 包含了独立的、可复用的组件，有助于将 UI 切成逻辑部分、提高代码质量。 - **双向数据绑定：** 利用双向数据绑定，Vue 能自动更新 UI，对应数据模型发生改变时同步更新视图。 - **声明式渲染：** 编写模板完成数据驱动的视图，自动追踪依赖关系，并且在数据模型发生更改时仅重新计算最小必要部分。 - **虚拟DOM：** 通过 Vue 的虚拟 DOM 进行更效率的视图更新，降低视图更新所需的计算量。 - **响应式系统：** Vue 拥有一个响应式系统，当数据更改时会自动跟踪和更新所有相关视图。 - **易于集成：** Vue 可与其他 JavaScript 库或现有项目相互集成，同时方便和流行的前端工具链合作。 #### 主要模块 - **Vue Router：** 官方提供的路由管理器，有助于构建单页面应用程序。 - **Vuex：** 是一个状态管理库，有助于简化和规范在组件之间共享的数据和方法。 - **Vue CLI：** 是一个命令行工具，匹配各种扩展，有助于快速搭建 Vue 项目，包括开发、构建和部署。 #### 适用场景 - 单页面应用（SPA）开发：在单一页面中完成路由切换、状态管理和 UI 渲染等流程。 - Web 应用程序开发： Vue 可与其他库如 Axios 结合，方便地建立发起 HTTP 请求的 API 客户端。 - 组件库和 UI 框架：借助 Vue 的组件系统，可以构建封装的、具有丰富功能的 UI 组件和框架。 - 原型开发：使用 Vue 快速构建和验证产品原型，提高开发效率。 Vue 因易于入门、高度灵活、丰富的生态系统以及优异的性能而受到许多开发者的欢迎，是 Web 开发领域一种非常值得学习的前端框架。
前端5月28日 03:15
如何在 Vue 中实现事件总线 EventBus？Vue 2 里用一个空 Vue 实例做中央事件通道，组件通过它发事件和听事件：
```javascript
// event-bus.js
import Vue from 'vue';
export const EventBus = new Vue();
```
发送端 `EventBus.$emit`，接收端 `EventBus.$on`，销毁前必须 `EventBus.$off` 解绑——忘了这一步就是内存泄漏。
典型场景：登录弹窗成功后通知导航栏更新头像，两个组件隔了好几层，props 传递不现实，EventBus 几行代码搞定。
Vue 3 移除了 `$on/$off`，官方推荐用 [mitt](https://github.com/developit/mitt) 替代，写法几乎一样：
```javascript
import mitt from 'mitt';
export const bus = mitt();
// 发送
bus.emit('login-success', { user: 'xxx' });
// 监听
bus.on('login-success', handler);
// 移除
bus.off('login-success', handler);
```
## 追问
### Vue 3 为什么移除 $on/$off？
Vue 3 的响应式体系更推崇单向数据流和显式状态管理。EventBus 是隐式依赖——组件 A emit 一个事件，组件 B 在哪监听的完全不知道，出了 bug 追踪困难。Vue 团队认为这种模式弊大于利，干脆砍掉。如果确实需要事件模式，mitt 只有 200 字节，功能够用。
### EventBus 和 Pinia 怎么选？
EventBus 适合"通知型"通信——A 告诉 B 发生了什么事，不需要持久化数据。Pinia 适合"状态型"通信——多个组件共享同一份数据，需要 devtools 调试和变更追溯。事件一多就别用 EventBus，散落在各组件里的 on/off 根本理不清，直接上 Pinia。
### 为什么必须 $off？忘了会怎样？
组件销毁了但 EventBus 实例还活着，回调引用还在，下次 emit 还会执行——操作一个已销毁组件的 this，轻则报错重则数据错乱。更严重的是 EventBus 持有回调闭包，闭包引用了组件实例，GC 无法回收，这就是内存泄漏。Vue 2 里如果用了箭头函数做 handler，`$off` 时传引用也解不掉，必须用命名函数。
### EventBus 事件名冲突怎么办？
大型项目里十几个组件各自 emit/on，事件名撞了根本不会报错——只是 A 的数据莫名其妙到了 B。解法：统一在常量文件里定义事件名，禁止硬编码字符串。更好的做法是如果事件超过 5-6 个就别用 EventBus 了，换 Pinia。
### TypeScript 下 mitt 怎么做类型安全？
mitt 支持泛型约束事件 map：
```typescript
type Events = {
'login-success': { user: string };
'logout': undefined;
};
const bus = mitt<Events>();
bus.emit('login-success', { user: 'xxx' }); // ✓
bus.emit('wrong-name', {}); // ✗ 类型报错
```
这样事件名和 payload 类型都有编译期检查，比 Vue 2 的 EventBus 安全得多。前端5月27日 01:06
Vue 3 如何在 setup 方法中获取组件实例？Vue 3 Composition API 中，`setup` 里没有 `this`。要获取组件实例相关的能力，用对应的 API 而不是拿整个实例：
- **获取 DOM 元素**：`const el = ref(null)` + `ref="el"` 绑定，通过 `el.value` 访问
- **获取路由实例**：`const router = useRouter(); const route = useRoute()`
- **获取 store**：`const store = useStore()`（Pinia 或 Vuex 4）
- **需要组件内部数据**：直接在 `setup` 里定义 `ref/reactive` 并 return，模板可直接访问
- **需要父组件数据**：`defineProps` + `defineEmits`
如果非拿实例不可（极少场景），Vue 3 提供了 `getCurrentInstance()`：
```javascript
import { getCurrentInstance } from 'vue';
const instance = getCurrentInstance();
// instance.proxy 近似 Vue 2 的 this
```
但官方不推荐依赖它，内部实现在版本间可能变化。
## 追问
### Vue 3 为什么不给 this？
Composition API 设计目标是函数式、可复用、类型推导友好。`this` 会绑定上下文，函数提取出去 `this` 就丢了。而 `ref`/`reactive` 是普通的 JS 值/对象，可以自由传递不丢失响应性。
### template ref 和 document.getElementById 怎么选？
template ref 是 Vue 的方式——能保证在组件挂载后拿到元素，且不同组件实例互不干扰。`document.getElementById` 能拿到但可能拿到错误组件的元素（同页面多实例时），也不符合 Vue 的数据驱动理念。
### getCurrentInstance 在 setup 外能用吗？
不能在 setup 外调用（如生命周期钩子的回调外）。它只在 `setup` 同步执行期间有效，异步回调里拿到的可能是 null。
前端5月27日 01:06
什么是双向绑定？Vue 是如何实现双向绑定功能的？双向绑定 = 数据变化自动更新视图 + 用户输入自动更新数据。最典型的场景就是 `<input v-model="msg">`——你修改 input 的值，`msg` 跟着变；JS 里改 `msg`，input 显示跟着变。
Vue 2 用 `Object.defineProperty` 劫持对象属性的 getter/setter 实现数据 → 视图的响应式，用 `v-model` 监听 input 事件实现视图 → 数据的反向同步。
Vue 3 换成了 `Proxy`，能拦截更多操作（属性增删、数组索引），不需要像 Vue 2 那样用 `$set` 手动处理新增属性。
## 追问
### v-model 的本质是什么？
`v-model="msg"` 是语法糖，等价于 `:value="msg" + @input="msg = $event.target.value"`。对于 checkbox 是 `:checked + @change`，对于 select 是 `:value + @change`。
### 双向绑定和单向数据流矛盾吗？
不矛盾。Vue 仍然是单向数据流（父 → 子通过 props，子 → 父通过 emit）。`v-model` 只是父子通信的一种语法糖，本质上还是 `prop + event` 的模式。
### 什么场景不适合用双向绑定？
- 需要在赋值前做复杂转换的（用 computed + emit 更清晰）
- 多个输入源同时修改一个数据的（容易互相覆盖）
- 需要中间确认操作的（如提交时才正式更新）
前端2月7日 11:57
Vue中渲染函数比模板有什么好处？Vue中渲染函数相比于模板的好处包括：
1. **灵活性和动态性**：渲染函数提供更高的灵活性和动态性，使开发者能够编写更动态的组件逻辑。在复杂的场景下，使用渲染函数可以根据不同的状态和条件动态生成不同的元素和结构。
2. **更细粒度的控制**：通过渲染函数，开发者可以精确地控制每一个DOM节点的创建方式，属性和行为。这在处理复杂的用户交互和动态内容时尤其有用。
3. **JavaScript的完整能力**：使用渲染函数意味着你可以使用JavaScript的全部特性来构建视图层，这包括高阶函数、条件语句、循环等，从而可以编写更加优雅和强大的代码。
4. **集成第三方库的便利**：当需要在Vue组件中整合非Vue库或UI框架时，渲染函数可以更灵活地操作DOM，帮助更好地集成这些库。
5. **避免重复的模板结构**：在需要根据不同情况重用相似但略有不同的DOM结构时，渲染函数可以通过编程的方式生成这些结构，避免了模板中的重复代码。
6. **优化性能**：对于非常大或复杂的模板，使用渲染函数可以手动优化渲染过程，有时能够比自动生成的模板渲染代码更有效率。
总的来说，渲染函数主要在需要高度灵活和动态的场景中显示出其优势，尤其适合高级开发者和复杂应用的开发。前端2月6日 23:57
Vue中如何重用具有key属性的元素？在Vue中，`key`属性主要用于Vue的虚拟DOM算法，以便跟踪可复用的元素。当你有一组元素，并且可能会动态地改变顺序或更新列表中的元素时，使用`key`可以帮助Vue准确地识别哪些元素是新的，哪些被重用了。这可以提高渲染性能并减少潜在的渲染错误。
例如，如果你有一个列表，每个列表项都可能被更新或重新排序，你可以这样使用`key`:
```html
<div id="app">
<ul>
<li v-for="item in items" :key="item.id">
{{ item.text }}
</li>
</ul>
</div>
```
在这个例子中，每个`li`元素都被赋予了一个基于`item.id`的唯一key。当`items`数组发生变化时，Vue会使用`key`来确定哪些元素可以被保留，哪些需要重新创建。这种方法特别有用，比如在进行列表排序或替换列表中的项目时，因为Vue可以就地复用DOM结构和组件实例，避免不必要的元素重建和组件状态丢失。前端2月6日 23:56
vue中如何在本地注册指令？在Vue中，可以通过两种方式在组件中本地注册指令：全局注册和局部注册。
### 局部注册指令
要在单个组件中局部注册指令，你可以在组件的选项对象中使用 `directives` 属性。这里是一个基本的例子：
```javascript
<template>
<div v-my-directive>我是一个有指令的元素</div>
</template>
<script>
export default {
directives: {
'my-directive': {
bind(el, binding, vnode) {
// 当指令第一次绑定到元素时调用
el.style.backgroundColor = 'yellow';
},
update(el, binding, vnode, oldVnode) {
// 被绑定元素所在的模板更新时调用
if (binding.value !== binding.oldValue) {
el.style.backgroundColor = binding.value;
}
}
}
}
}
</script>
```
### 在上面的例子中：
- `directives` 对象中定义了一个名为 `my-directive` 的指令。
- `bind` 钩子在指令第一次绑定到元素时调用，这里用来设置元素的初始样式。
- `update` 钩子在包含该指令的组件的 VNode 更新时被调用，可以通过比较 `binding.value` 和 `binding.oldValue` 来决定是否需要更新元素的样式。
这种方式的指令只能在声明它的那个组件内使用。前端2月6日 23:56
vue中分组routes 到chunks中有什么优势？在Vue中，将routes分组到chunks中主要有以下几个优势：
1. **性能优化**：通过代码分割，只有在用户实际访问对应路由时，才会加载相应的chunk。这样可以减少应用初始加载时的文件大小，使得应用启动更快。
2. **按需加载**：分组后的chunks可以实现按需加载，即按页面或功能模块加载资源，从而避免加载整个应用的所有脚本和资源，提升页面的响应速度和用户体验。
3. **缓存利用**：将公共依赖和库分离到单独的chunks中，这些chunks可以被多个路由共享，并且可以被浏览器缓存起来。当用户访问其他页面时，若已缓存这些公共chunks，将不需要重新加载，这样可以减少网络请求，加快加载速度。
4. **简化调试**：在开发过程中，如果每个路由的依赖都在独立的chunk中，当某个页面出现问题时，可以快速定位到对应的chunk，这样可以更加快捷和准确地进行bug修复和性能优化。
5. **更好的适应性和可维护性**：随着应用规模的扩大，全部加载可能导致网页变得非常庞大。通过分组到chunks，可以将功能模块化，使得项目结构更清晰，便于管理和维护。前端2024年8月5日 12:48
Composition API 如何实现逻辑复用在Vue.js的Composition API中，逻辑复用是通过使用可组合函数（composables）来实现的。可组合函数是可以封装和重用Vue组件逻辑的函数。Composition API引入了一种新的组织和重用组件逻辑的方式，它提供了更灵活的代码组织结构，使得函数的复用变得更加简单和清晰。
要实现逻辑复用，你可以按照以下步骤操作：
1. **创建可组合函数（composables）：**你可以创建一个独立的JavaScript函数，这个函数利用Composition API中的`ref`, `reactive`, `computed`, `watch`, `watchEffect`等响应性API来创建和管理状态或逻辑。
2. **在组件中使用可组合函数：**在Vue组件的`setup`函数中，你可以引入和使用这些可组合函数。这样，你就可以在多个组件之间共享和重用相同的逻辑，而无需复制代码。
3. **传递参数和返回值：**可组合函数可以接受参数并返回一些响应式引用、方法或其他值，这使得它们可以与组件进行交互并根据组件的需要进行调整。
下面我将通过一个简单的例子来说明这一过程：
假设我们有一个用于处理用户信息的逻辑，这部分逻辑需要在多个组件中复用。我们可以创建一个名为`useUser`的可组合函数来封装这部分逻辑。
```javascript
// useUser.js
import { ref } from 'vue';
export function useUser() {
const user = ref(null);
const isLoading = ref(false);
async function loadUser(userId) {
isLoading.value = true;
try {
const response = await fetch(`/api/users/${userId}`);
user.value = await response.json();
} catch (error) {
console.error('Failed to load user', error);
} finally {
isLoading.value = false;
}
}
return { user, isLoading, loadUser };
}
```
在上面的例子中，`useUser`函数创建了一个用户信息的响应式引用`user`和一个加载状态的响应式引用`isLoading`。它还提供了一个异步函数`loadUser`来加载用户数据。
现在，我们可以在组件中使用这个可组合函数了：
```javascript
// UserProfile.vue
<template>
<!-- 使用user和isLoading渲染UI -->
</template>
<script>
import { onMounted } from 'vue';
import { useUser } from './useUser';
export default {
setup() {
const { user, isLoading, loadUser } = useUser();
onMounted(() => {
loadUser('123'); // 假设'123'是用户ID
});
return { user, isLoading };
}
};
</script>
```
在`UserProfile.vue`组件的`setup`函数中，我们引入并调用`useUser`可组合函数，并在组件被挂载时调用`loadUser`函数来加载用户数据。这样，`user`和`isLoading`就可以在组件的模板中直接使用了。
这种方法不仅使得代码更加清晰和易于维护，而且还提高了代码的复用性。通过这种方式，我们可以将逻辑抽离出来，并在多个组件之间共享。前端2024年8月5日 12:48
Composition API和Options API 之间的区别是什么Composition API 和 Options API 是 Vue.js 框架中用于创建和组织组件的两种不同的API。Vue.js 是一个流行的前端JavaScript框架，用于构建用户界面和单页应用程序。下面我将详细说明它们之间的区别：
### Options API
Options API 是 Vue.js 最初提供的接口，它是基于一个包含描述组件选项的对象的概念。这些选项包括了`data`、`methods`、`props`、`computed`、`watch`、`lifecycle hooks`等属性。这种API的特点是将组件的不同方面划分到这些选项中，代码按功能组织。
**例子**：
```javascript
export default {
data() {
return {
message: 'Hello Vue!',
};
},
props: {
user: String,
},
computed: {
normalizedUser() {
return this.user.trim().toLowerCase();
},
},
methods: {
sayHello() {
alert(this.message);
},
},
};
```
在这个例子中，`data`是组件的状态，`props`是外部传入的属性，`computed`是计算属性，`methods`是组件的方法。
**优点**：
- 易于理解和上手，特别是对于初学者。
- 由于选项类型的组织方式，IDEs 和静态类型检查工具通常可以提供更好的支持。
**缺点**：
- 在大型和复杂的组件中，相互关联的逻辑会被拆分到不同的选项中，导致代码维护和理解上的困难。
- 当组件变得庞大时，相同功能的代码可能散布在不同的选项中，难以追踪和组织。
### Composition API
Composition API 是在 Vue.js 3 中引入的，旨在解决 Options API 在构建大型应用时遇到的问题。它提供了更加灵活的方式来组织和重用代码。使用Composition API，开发者可以更容易地将组件逻辑基于功能划分和抽象成可复用的函数。
**例子**：
```javascript
import { ref, computed } from 'vue';
export default {
setup(props) {
const message = ref('Hello Vue!');
const normalizedUser = computed(() => props.user.trim().toLowerCase());
function sayHello() {
alert(message.value);
}
return {
message,
normalizedUser,
sayHello,
};
},
props: {
user: String,
},
};
```
在这个例子中，`setup`函数是组件中所有Composition API逻辑的起点。通过导入`ref`和`computed`，我们可以定义响应式状态和计算属性。`setup` 函数返回的对象将定义组件的响应式状态和方法。
**优点**：
- 更好的逻辑复用和抽象，便于开发者根据功能组织代码，使得代码更加模块化。
- 更容易控制变量的作用域和生命周期。
- 更好地与TypeScript集成，提升类型推断的能力和开发体验。
**缺点**：
- 学习曲线相对较陡峭，特别是对于那些习惯于 Options API 的开发者。
- 尽管它提供了更大的灵活性，但在小型项目或简单组件中可能会引入不必要的复杂性。
### 结论
Options API 和 Composition API 都是 Vue.js 提供的强大工具，它们各有优势。选择哪种API取决于项目的需求、组件的复杂性以及开发团队的偏好。Composition API 在处理大型项目和复杂组件时优势明显，而Options API 在小型项目或对于新手更前端2024年7月4日 09:37
Vue组件之间通信方式有哪些在Vue.js中，组件之间的通信是一个非常重要的话题，因为它关系到应用程序如何将数据和事件在多个组件之间传递。Vue提供了多种组件通信的方式，适用于不同的场景。下面是一些常见的通信方式：
### 1. Props 和 Events
这是最基本也是最常用的组件间通信方式。父组件通过props向子组件传递数据，子组件通过事件向父组件发送消息。
**例子**：
在父组件中：
```vue
<template>
<Child :parentData="data" @childEvent="handleEvent"/>
</template>
<script>
import Child from './Child.vue';
export default {
components: { Child },
data() {
return {
data: 'data from parent',
};
},
methods: {
handleEvent(payload) {
console.log('Event received from child:', payload);
},
},
};
</script>
```
在子组件中：
```vue
<template>
<button @click="sendToParent">Send to Parent</button>
</template>
<script>
export default {
props: ['parentData'],
methods: {
sendToParent() {
this.$emit('childEvent', 'data from child');
},
},
};
</script>
```
### 2. Event Bus
Event bus 是一种使用Vue实例作为中央事件总线的方法，在不直接关联的组件之间传递消息。
**例子**：
```javascript
// eventBus.js
import Vue from 'vue';
export const EventBus = new Vue();
```
在发送事件的组件中：
```javascript
import { EventBus } from './eventBus.js';
export default {
methods: {
sendEvent() {
EventBus.$emit('do-something', 'some data');
},
},
};
```
在接收事件的组件中：
```javascript
import { EventBus } from './eventBus.js';
export default {
created() {
EventBus.$on('do-something', data => {
console.log(data);
});
},
};
```
### 3. Vuex
Vuex是Vue.js的状态管理库，可以用来管理所有组件的共享状态，是一种全局的通信方式。
**例子**：
```javascript
// store.js
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
export default new Vuex.Store({
state: {
message: '',
},
mutations: {
updateMessage(state, message) {
state.message = message;
},
},
});
```
在一个组件中更新状态：
```vue
<template>
<button @click="update">Update Message</button>
</template>
<script>
import { mapMutations } from 'vuex';
export default {
methods: {
...mapMutations([
'updateMessage', // 映射 this.updateMessage() 为 this.$store.commit('updateMessage')
]),
update() {
this.updateMessage('Hello from Component A');
},
},
};
</script>
```
在另一个组件中获取状态：
```vue
<template>
<div>{{ message }}</div>
</template>
<script>
import { mapState } from 'vuex';
export default {
computed: {
...mapState([
'message', // 映射 this.message 为 this.$store.state.message
]),
},
};
</script>
```
### 4. Provide / Inject
这是一种在更深层次的嵌套组件中传递数据的方法，不需要通过每个组件层次传递props。
**例子**：
在祖先组件中：
```vue
<script>
export default {
provide() {
return {
theme: 'dark',
};
},
};
</script>
```
在任意后代组件中：
```vue
<script>
export default {
inject: ['theme'],
mounted() {
console.log(this.theme); // 输出: 'dark'
},
};
</script>
```
这些通信方式各有优缺点，适用于不同的场景和需求，通常在实际开发中需要根据应用的具体需求来选择合适的通信方式。前端2024年6月24日 16:43
在 Vue 中，watch和watchEffect的区别是什么？在Vue中，`watch`和`watchEffect`是两种响应式侦听器，都能够对响应式状态的变化作出反应，但是它们的工作方式和使用场景有所不同。
### watch
`watch` API 允许我们侦听特定的数据源，并在数据源改变时执行回调函数。它是响应式系统的一部分，非常适合于执行异步操作或比较昂贵的操作，因为你可以精确控制何时以及如何响应状态的变化。
- **精确性**: `watch`允许你指定确切的响应式引用或计算属性来侦听。
- **懒执行**: `watch`默认情况下不会立即执行回调，它只会在侦听的响应式源发生变化时才执行。
- **深度监听**: `watch`可以配置为深度监听，侦听对象内部属性的变化。
- **旧值和新值**: `watch`回调提供新旧值，便于比较。
- **停止监听**: `watch`返回一个停止观察函数，你可以用它来停止监听。
**例子**:
```vue
<template>
<div>{{ count }}</div>
</template>
<script>
export default {
data() {
return {
count: 0
}
},
watch: {
count(newVal, oldVal) {
// 当 count 改变时，这个函数将被调用
console.log(`Count changed from ${oldVal} to ${newVal}`);
}
}
}
</script>
```
### watchEffect
`watchEffect`是一个响应式侦听器，它自动追踪它的函数内部使用的任何响应式状态，当这些状态改变时会重新执行该函数。
- **自动追踪**: `watchEffect`会自动侦听函数内部所有的响应式引用，并在引用更新时重新运行。
- **立即执行**: `watchEffect`在创建时会立即执行一次，确保响应式效果与当前的状态同步。
- **无需指定侦听源**: 不需要像`watch`那样指定侦听的具体状态，它会自动收集依赖。
- **无旧值**: `watchEffect`不提供旧值，因为它不侦听特定的数据源。
- **停止监听**: `watchEffect`同样返回一个停止监听的函数。
**例子**:
```vue
<template>
<div>{{ count }}</div>
</template>
<script>
import { ref, watchEffect } from 'vue';
export default {
setup() {
const count = ref(0);
watchEffect(() => {
// 这个函数会在 setup() 时立即执行一次，并在 count 改变时再次执行
console.log(`Count is now: ${count.value}`);
});
return { count };
}
}
</script>
```
总结一下，`watch`更适用于当你需要侦听特定数据并在变化时进行比较或执行复杂逻辑时，而`watchEffect`则更适用于当你希望自动追踪并响应响应式状态变化，而不需要过多地控制侦听源和执行时机时。