Vue 基础面试题, Vue 中 computed 和 methods 的区别是什么?
Vue 基础面试题, Vue 中 computed 和 methods 的区别是什么?
QA
Step 1
Q:: Vue 中 computed 和 methods 的区别是什么？
A:: 在 Vue 中，computed 和 methods 都可以用来定义组件中的函数，但它们的用途和行为有所不同。
1. **computed**:
- **缓存功能**: computed 属性的结果会基于其依赖的响应式数据进行缓存，只有在依赖的数据发生变化时，才会重新计算。这使得 computed 在处理耗时操作时更加高效。
- **用作属性**: computed 通常用于计算属性，返回值可以直接在模板中作为变量来使用。
- **使用场景**: 适用于依赖于其他数据且需要性能优化的计算任务。
2. **methods**:
- **无缓存**: methods 定义的函数每次调用时都会重新执行，无论依赖的数据是否变化。
- **用作方法**: methods 更适合用来定义用户交互等不需要缓存的功能，例如点击事件处理器。
- **使用场景**: 适用于不需要依赖响应式数据的场景，如事件处理函数或需要每次调用都执行的任务。
Step 2
Q:: Vue 中 watch 和 computed 的区别是什么？
A:: watch 和 computed 都可以用于监听数据的变化，但它们的适用场景有所不同。
1. **computed**:
- 适用于基于一个或多个依赖属性计算一个新的值的情况。
- 通常在模板中使用。
- 计算结果会被缓存，直到依赖的属性发生变化。
2. **watch**:
- 适用于需要在数据变化时执行异步或开销较大的操作，例如 API 请求或手动 DOM 操作。
- 你可以在回调中访问旧值和新值，并根据需要进行操作。
- 更加灵活，可以深度监听对象或数组内部的变化。
Step 3
Q:: Vue 中组件之间如何通信？
A:: 在 Vue 中，组件之间的通信方式主要包括以下几种：
1. **Props 和 Events**:
- 父组件通过 props 向子组件传递数据，子组件通过 $emit 触发事件通知父组件。
- 这种方式适用于父子组件间的单向数据流。
2. **EventBus**:
- 使用一个空的 Vue 实例作为中央事件总线，用于在非父子关系的组件之间传递事件。
- 虽然简单，但在大型应用中可能不够健壮且难以维护。
3. **Vuex**:
- 适用于复杂的应用，用于管理全局状态。
- Vuex 是一个专门为 Vue 应用设计的状态管理模式，支持在不同组件之间共享数据和状态。
4. **Provide/Inject**:
- 用于跨级组件传递数据，父组件使用 provide 提供数据，子孙组件通过 inject 注入数据。
- 这种方式适用于组件嵌套较深的场景。
Step 4
Q:: Vue 中 v-if 和 v-show 的区别是什么？
A:: v-if 和 v-show 都可以控制元素的显示与隐藏，但它们的实现机制不同：
1. **v-if**:
- 元素只有在条件为真时才会被渲染到 DOM 中，条件为假时，元素和其绑定的事件监听器等都会被销毁。
- 更适合在条件性渲染较少时使用，因为它涉及 DOM 的销毁和重建，开销较大。
2. **v-show**:
- 元素始终会被渲染到 DOM 中，只是通过 CSS 的 display 属性进行显示或隐藏。
- 更适合需要频繁切换显示状态的场景，因为它只切换 display，不涉及 DOM 结构的变化。