39 lines
2.2 KiB
Markdown
39 lines
2.2 KiB
Markdown
1、讲几个封装组件的经验或者技巧
|
||
|
||
2、
|
||
|
||
3、Vue3在Vue2提升了哪些？
|
||
|
||
Vue3 相较于 Vue2 在多个方面进行了全面升级，包括性能、功能、架构、API 和开发体验等。
|
||
|
||
性能提升
|
||
|
||
Vue3 使用 Proxy 替代 Vue2 的 Object.defineProperty 实现响应式系统，避免了深度遍历对象的性能开销，并支持对属性的新增和删除进行监听。渲染性能也得到了优化，采用静态树提升和改进的 Diff 算法，使渲染速度显著提升。此外，Vue3 的包体积更小，支持更高效的 Tree-shaking 和模块化设计。
|
||
|
||
编码方式
|
||
|
||
Vue3 引入了 Composition API，通过函数式编程组织逻辑，代码更加聚合和易于维护。相比 Vue2 的 Options API，Composition API 提供了更高的灵活性和逻辑复用能力。Vue3 还支持 setup 函数统一声明逻辑，移除了 this 的使用，避免了上下文混淆。
|
||
|
||
生命周期优化
|
||
|
||
Vue3 合并并新增了一些生命周期钩子，例如 onMounted、onUnmounted 等，替代了 Vue2 的 beforeCreate 和 created。通过 setup 函数，用户可以更灵活地组织生命周期逻辑。
|
||
|
||
API 调整
|
||
|
||
Vue3 移除了 Vue2 中的一些不常用 API，例如 $on、$off 和过滤器（filters）。推荐使用方法或计算属性代替过滤器。此外，Vue3 提供了更强大的全局 API 和源码级扩展能力，例如 createRenderer。
|
||
|
||
Diff 算法改进
|
||
|
||
Vue3 使用 Shape Flags 更精确地标记静态节点，支持分块对比和异步渲染，减少无效对比，提高性能。核心 Diff 逻辑经过裁剪，代码量减少超过 40%。
|
||
|
||
TypeScript 支持
|
||
|
||
Vue3 使用 TypeScript 重写，提供了内置的类型支持和更好的类型推导能力。开发者可以通过 defineComponent 和泛型等特性更轻松地构建类型安全的应用。
|
||
|
||
新特性支持
|
||
|
||
Vue3 引入了 Fragment、Teleport 和 Suspense 等新特性，增强了组件的灵活性和功能性。同时，Vue3 支持异步组件和更高效的 SSR 渲染。
|
||
|
||
总结
|
||
|
||
Vue3 在性能、功能和开发体验上相较于 Vue2 有显著提升。它适用于更复杂的应用场景，并通过模块化设计和 TypeScript 支持，为开发者提供了更现代化的开发工具和更高效的工作流 |