--- theme: geek-black --- # 前言针对前端工程师的10道关于Vue3的面试题，这些问题着重考察候选人对Vue3的使用情况和理解。 # 1. Vue3 的 Composition API 和 Options API 有哪些区别？举例说明 Composition API 的优势。 ## 示例回答： > Composition API 允许将逻辑更加集中和复用，通过 setup 函数组合多个逻辑块。 > > 相比于 Options API 的分散代码，Composition API 更加模块化和可维护。 ```js import { ref, reactive, toRefs } from 'vue'; export default { setup() { const count = ref(0); const state = reactive({ count: 0 }); function increment() { state.count++; } return { ...toRefs(state), increment }; } } ``` # 2. 如何在 Vue3 中使用 ref 和 reactive？它们的区别是什么？ ## 示例回答： > ref 用于创建一个响应式的基本类型或对象引用。 > > reactive 用于创建一个响应式的对象。 ```js import { ref, reactive } from 'vue'; const count = ref(0); const state = reactive({ count: 0 }); // 区别在于 `ref` 返回一个对象，值存储在 `.value` 属性中 console.log(count.value); // 0 console.log(state.count); // 0 ``` # 3. Vue3 中的 ` ``` # 4. Vue3 的 Teleport 是什么？在什么场景下会用到？ ## 示例回答： > Teleport 允许将组件的渲染内容移动到 DOM 的其他位置。常用于模态框、弹出菜单等需要脱离组件树布局的场景。 ```js ``` # 5. Vue3 中如何使用 provide 和 inject 实现依赖注入？它们的作用是什么？ ## 示例回答： > provide 用于在上级组件中提供数据，inject 用于在下级组件中注入数据，适用于跨组件传递数据而无需通过 props 和 emits。 ```js // 父组件 import { provide } from 'vue'; export default { setup() { provide('message', 'Hello from parent'); } } // 子组件 import { inject } from 'vue'; export default { setup() { const message = inject('message'); console.log(message); // Hello from parent } } ``` # 6. Vue3 中的 Suspense 是什么？如何使用它来处理异步组件？ ## 示例回答： > Suspense 组件用于处理异步组件加载，提供了一个优雅的加载状态处理机制。 ```js ``` # 7. 请解释 Vue3 中响应式系统的工作原理。Vue3 如何优化性能？ ## 示例回答： > Vue3 使用 Proxy 代替 Vue2 中的 Object.defineProperty 来实现响应式系统，这使得对整个对象的代理更加高效和全面。它通过依赖追踪和触发机制，确保只有实际变化的部分重新渲染，从而优化性能。 # 8. Vue3 中如何创建和使用自定义指令？请举例说明。 ## 示例回答： > 自定义指令可以通过 app.directive 创建，并在组件中使用。 ```js // 创建自定义指令 const app = createApp(App); app.directive('focus', { mounted(el) { el.focus(); } }); // 使用自定义指令 ``` # 9. 在 Vue3 中，如何使用 emits 选项来定义组件事件？它与 Vue2 的事件处理有何不同？ ## 示例回答： > emits 选项用于显式定义组件可以发出的事件。相比于 Vue2 中的隐式事件，在 Vue3 中定义事件更加明确。 > ```js export default { emits: ['custom-event'], setup(props, { emit }) { const triggerEvent = () => { emit('custom-event'); } } } ``` # 10. Vue3 中如何使用 v-model 在组件中实现双向数据绑定？请解释 v-model 的工作机制。 ## 示例回答： > v-model 在 Vue3 中可以绑定到任意 prop，通过 modelValue 和自定义事件实现双向数据绑定。 ```js ``` 这些问题涵盖了 Vue3 中的重要概念和新特性，能够有效地评估候选人对 Vue3 的掌握情况。