【VUE3】vue3 面试知识点

1. Vue 3 相比 Vue 2 的主要改进

• Composition API：引入了一套基于函数的 API，允许以更灵活和可复用的方式组织组件逻辑。
• 性能提升：通过改进虚拟 DOM 的算法和底层架构，实现了更快的渲染速度和更低的内存使用率。
• TypeScript 支持：对 TypeScript 的支持更加完善，提供了更好的类型检查和代码提示。
• 响应式系统重构：使用 Proxy 代替了 Object.defineProperty，解决了 Vue 2 中响应式系统的一些限制，如无法监听数组的变化等。
• Fragment 和 Teleport：允许组件有多个根节点，并支持将子组件渲染到 DOM 中的任何位置。

2. Composition API

• setup 函数：是 Composition API 的入口点，用于初始化状态、计算属性和方法，并返回在模板中使用的响应式引用。
• ref 和 reactive：用于创建响应式引用和对象。ref 通常用于基本数据类型，而 reactive 用于复杂数据类型如数组和对象。
• computed 和 watch/watchEffect：computed 用于定义计算属性，watch 和 watchEffect 用于监听响应式数据的变化并执行回调函数。

3. 生命周期钩子

• Vue 3 对生命周期钩子进行了一些调整和优化，如将 beforeDestroy 和 destroyed 重命名为 beforeUnmount 和 unmounted。
• 新增了 setup 钩子函数，以及 onBeforeMount、onMounted、onBeforeUpdate、onUpdated、onBeforeUnmount 和 onUnmounted 等生命周期钩子函数。

4. 响应式系统

• Vue 3 的响应式系统通过 ES6 的 Proxy 对象来实现，可以监听到对象的所有属性，包括新增和删除操作。
• 当使用 reactive 或 ref 函数时，Vue 会创建一个 Proxy 对象来包裹原始数据，拦截对原始数据的访问和修改，从而追踪数据的变化。

5. 组件通信

• Props 和 Events：用于父子组件之间的通信。
• Provide 和 Inject：允许在祖先组件和后代组件之间传递数据，而不需要通过 props 和 events 进行逐层传递。
• Vuex 和 Vue Router：Vuex 用于管理全局状态，Vue Router 用于管理路由。

6. 插槽（Slots）

• Vue 3 支持具名插槽和默认插槽的混合使用，使得插槽的使用更加灵活。
• 引入了作用域插槽（Scoped Slots），允许在插槽中访问子组件的数据和方法。

7. 异步组件和 Suspense

• Vue 3 支持异步组件，允许延迟加载组件，直到需要时才加载，从而优化性能。
• Suspense 组件允许指定一个加载中的状态（fallback）和一个加载失败的状态（fallback slot），用于处理异步组件的加载状态。

8. TypeScript 集成

• Vue 3 内部已经使用 TypeScript 进行编写，因此与 TypeScript 的集成非常顺畅。
• 开发者可以直接在 Vue 组件中使用 TypeScript 的类型声明和接口，以提供更严格的类型检查和更好的代码提示。

9. 性能优化

• 使用 v-show 代替 v-if 来频繁切换元素，因为 v-show 只是切换元素的 CSS 属性。
• 使用 key 来优化列表渲染的性能。
• 使用 computed 和 watch 来减少不必要的计算和渲染。
• 使用 v-memo 来缓存组件的渲染结果。

10. 其他知识点

• 自定义指令：Vue 3 中的自定义指令可以使用 app.directive() 方法或组件的 directives 选项来定义。
• 路由和 Vue Router 4：Vue Router 4 与 Vue 3 一起发布，支持 Vue 3 的 Composition API，并引入了一些新的功能和 API。
• 服务器端渲染（SSR）：Vue 3 支持服务器端渲染，可以使用 Nuxt.js 等框架来实现。