vue3.5 面试常考的新性能有哪些

77 阅读3分钟

目前 Vue 并没有 3.5 版本,Vue3 相比 Vue2 有许多新特性和性能改进,这些内容在面试中经常被问到,以下是一些主要的方面:

响应式系统升级

  • Proxy 替代 Object.defineProperty

    • Vue3 采用 ES6 的 Proxy 来实现响应式系统,它可以直接监听对象和数组的变化,而不像 Vue2 那样需要对对象的每个属性进行遍历和劫持。例如,对于一个深层嵌套的对象,Vue3 可以更高效地追踪其变化,不需要像 Vue2 那样进行递归遍历和重新定义属性。
    • 对于数组的操作,Proxy 也能更精准地监听,如直接通过索引修改数组元素,Vue3 能及时响应,而 Vue2 在某些情况下可能需要特殊处理才能检测到变化。
  • Reflect API 的使用

    • Vue3 在响应式系统中结合使用了 Reflect API,它提供了更便捷、更安全的方式来操作对象的属性。比如在获取和设置属性值时,Reflect 可以更好地处理属性不存在等情况,使代码更加健壮。

虚拟 DOM 优化

  • 静态提升

    • Vue3 会在编译阶段对模板进行分析,将不包含响应式数据的静态节点提升到渲染函数之外,只创建一次,而不是每次渲染都重新创建。这大大减少了虚拟 DOM 的创建和比对开销,提高了渲染性能。例如,对于一些纯静态的 HTML 片段,如页面底部的版权信息等,在 Vue3 中会被优化为只渲染一次。
  • 事件侦听器缓存

    • 对于绑定在组件上的事件监听器,Vue3 会在首次渲染时缓存它们,当组件更新时,如果事件监听器没有变化,就不会重新创建。这在有大量事件绑定的场景下,能显著提高性能。

组件更新优化

  • Fragment 支持

    • Vue3 允许组件的模板根节点可以是多个元素,即可以使用 Fragment(片段)。这在某些场景下避免了不必要的包裹元素,使虚拟 DOM 结构更简洁,减少了渲染的节点数量,提高了渲染效率。
  • Teleport 组件

    • Teleport 提供了一种将组件内部的元素渲染到指定 DOM 位置的方式,而不是在组件的常规渲染位置。这在处理一些模态框、提示框等需要脱离文档流的元素时非常有用,能避免在组件更新时对这些元素进行不必要的重新渲染。
  • Suspense 组件

    • Suspense 用于处理异步组件的加载状态,它可以让开发者更优雅地展示加载中的状态,比如显示一个加载动画,直到异步组件加载完成。这提升了用户体验,同时也优化了异步组件的加载和渲染流程。

其他方面

  • 更好的 Tree-shaking 支持

    • Vue3 的代码结构更加模块化,使得 Tree-shaking 能够更有效地去除未使用的代码,减小打包后的文件体积,提高加载速度。
  • Composition API

    • Composition API 允许开发者更灵活地组织和复用组件逻辑,它将相关的逻辑代码组合在一起,相比 Vue2 的 Options API,在处理复杂组件逻辑时更清晰、更高效。例如,在处理多个相互关联的响应式数据和方法时,Composition API 可以将它们封装在一个函数中,提高了代码的可维护性和复用性。