2024前端面试准备之Vue3篇

温暖前端
1,173 阅读4分钟

1. Vue3相比Vue2有哪些改进？

  1. Composition API: Vue3引入了Composition API，使得组件的逻辑更加清晰和灵活。开发者可以根据功能逻辑将代码按照功能进行组织，而不是按照选项的方式。

  2. 更快的渲染性能：Vue3使用了Proxy代理对象来实现数据的响应式，相比Vue2的Object.defineProperty，性能更高效。

  3. Tree-shaking支持：Vue3支持Tree-shaking，可以更好地优化打包体积。

  4. Teleport组件：Vue3引入了Teleport组件，可以将子组件渲染到任意位置，使得组件的布局更加灵活。

  5. Fragments支持：Vue3支持Fragments，可以在组件中直接返回多个根节点。

  6. Suspense组件：Vue3引入了Suspense组件，可以在异步组件加载时显示loading状态，提升用户体验。

  7. 更好的TypeScript支持：Vue3对TypeScript的支持更加友好，可以更好地进行类型检查和提示。

  8. 更好的响应式系统：Vue3的响应式系统更加强大和灵活，可以更好地处理复杂的数据变化。

  9. 更好的错误处理：Vue3对错误处理进行了优化，提供了更好的错误提示和调试信息。

  10. 更好的组件性能：Vue3对组件的更新和渲染进行了优化，提升了组件的性能。

2. Vue3中的响应式系统有什么改变

  1. Proxy代替了Object.defineProperty：Vue3中使用Proxy对象来实现响应式数据，而不再使用Object.defineProperty。Proxy提供了更强大和灵活的拦截器，可以监听对象的任何变化，包括新增、删除和修改属性。

  2. Composition API：Vue3引入了Composition API，允许开发者将逻辑代码按功能组织，提高代码的可读性和可维护性。Composition API还可以更好地与TypeScript等工具集成，提供更好的开发体验。

  3. 更灵活的响应式数据：Vue3中可以通过reactive函数手动创建响应式数据，而不再需要像Vue2中那样依赖于data选项。这样可以更灵活地管理数据的响应式状态。

3. Vue3中的模板语法有哪些变化

  1. v-model指令：在Vue3中，v-model指令不再支持修饰符，如.sync和.lazy，而是通过自定义指令来实现类似的功能。

  2. v-if和v-for指令：在vue2中，v-for 的优先级比v-if更高；而在vue3中，v-if具有比v-for更高的优先级。

  3. 模板中的事件修饰符：在Vue3中，事件修饰符不再使用.native和.sync，而是使用on和model。

4. Vue3中异步组件加载有什么改进

  1. Suspense组件：Vue3引入了Suspense组件，可以更方便地处理异步组件的加载和错误处理。使用Suspense组件可以在异步组件加载过程中显示loading状态，同时也可以处理异步组件加载失败的情况。

  2. 新的异步组件加载方式：在Vue3中，异步组件的加载方式有所改进，使用import()函数可以更加简洁地定义异步组件。同时，Vue3还提供了defineAsyncComponent函数来定义异步组件，使得异步组件的定义更加灵活。

  3. 支持多个异步组件同时加载：在Vue3中，可以同时加载多个异步组件，而不需要等待前一个异步组件加载完成后再加载下一个。这样可以提高页面加载速度和性能。

5. Vue3和Vue2路由的区别

  1. Router实例化方式：在Vue2中，我们使用VueRouter实例来定义路由，而在Vue3中，我们使用createRouter函数来创建路由实例。

  2. History模式：在Vue3中，对于history模式的路由，需要使用createWebHistory函数来创建路由实例，而在Vue2中则是直接配置mode参数为history。

  3. 路由守卫：在Vue2中，路由守卫是通过router.beforeEach和router.afterEach来实现的，而在Vue3中，路由守卫是通过router.beforeRouteEnter、router.beforeRouteUpdate和router.beforeRouteLeave来实现的。

  4. 动态路由匹配：在Vue3中，动态路由匹配的写法有所改变，需要使用params属性来获取动态参数，而在Vue2中则是直接在$route.params中获取。

6. Vue3中的生命周期有哪些变化

1. beforeCreate -> 使用 setup() 函数代替
2. created -> 使用 setup() 函数代替
3. beforeMount -> onBeforeMount
4. mounted -> onMounted
5. beforeUpdate -> onBeforeUpdate
6. updated -> onUpdated
7. beforeDestroy -> onBeforeUnmount
8. destroyed -> onUnmounted
9. errorCaptured -> onErrorCaptured

此外，Vue3中引入了新的生命周期钩子：

1. onRenderTracked：当一个响应式对象被追踪时触发
2. onRenderTriggered：当一个组件重新渲染时触发
avatar
文章
阅读
粉丝