网站建设茶店网,网站规划明细表,学校网站建设具体分工,网站建设平台汉龙vue2/vue3 的对比
响应式原理 vue2 使用 definePropertyvue3 使用 proxyapi vue2 是选项式 options API 基于对象的方式#xff0c;将组件的选项 data#xff0c;methods 等作为组件实例属性代码逻辑比较复杂#xff0c;难以维护data 必须是函数使用 mixin 复用相同逻辑 命…vue2/vue3 的对比
响应式原理 vue2 使用 definePropertyvue3 使用 proxyapi vue2 是选项式 options API 基于对象的方式将组件的选项 datamethods 等作为组件实例属性代码逻辑比较复杂难以维护data 必须是函数使用 mixin 复用相同逻辑 命名冲突数据来源不清楚vue3 引入了组合式 composition api 更灵活强大的组件状态和逻辑管理方式高内聚第耦合代码组织和重用更加方便基于函数的方式使用 refreactive 等函数来创建响应式数据使用函数而不是对象提高 tree-shaking优化减小打包体积更容易实现逻辑复用不适用 this减少了 this 指向不明的问题编译时优化 vue3 在编译时会对模板进行静态分析并且会将模板编译成优化过的渲染函数。这些渲染函数是静态的不依赖于运行时的状态因此可以提高渲染性能。虚拟 dom 优化 Vue 3 对虚拟 DOM 进行了一些优化包括对静态节点的标记和缓存以及更高效的 Patch 算法从而提高了渲染性能。dff 算法策略 深度优先同层比较 比较只会在同层级进行, 不会跨层级比较比较的过程中循环从两边向中间收拢插槽变化 vue3 中作用域插槽被 slot 语法替换渲染函数变化 vue2 使用 createElementvue3 使用 h 函数来代替fragment 支持 vue3 的渲染函数支持返回片段可以在渲染函数中直接返回多个跟节点动态组件 vue2 使用 componentvue3 的动态组件使用 :is 指令来指定动态组件类型模版 vue3 模版支持多个根结点Teleport 支持 Vue 3 中引入了 Teleport传送门特性允许组件在 DOM 树中的任何位置渲染自己的内容与 Vue 2 中的 slot 指令有所不同。typescript vue3 支持 ts全局 API重构 vue2 使用 Vue.xx()vue3 使用 app.xx()tree-shaking vue2 默认不支持tree-shaking 但是可以使用 webpack等工具实现 基于 cjs 语法基于单例的捆绑程序无法检测到该对象的哪些属性在代码中被使用到Vue3 源码引入 tree-shaking将全局 API 进行分块不使用某些功能不会包含在基础包中 基于 esm借助 esm 静态编译思想再编译时就能确定模块的依赖关系编译阶段利用ES6 Module判断哪些模块已经加载判断那些模块和变量未被使用或者引用进而删除对应代码这个 tree-shaking 原理和webpack的tree-shaking原理一样Vue 3 支持更好的 Tree-shaking可以更有效地剔除未使用的代码减少最终打包文件的大小。模块的静态分析按需引入编译时优化剔除未使用的导出vue3 更小的打包体积vue3 程序执行时间更快
vue3性能提升的体现
编译阶段渲染函数的优化 diff 算法优化静态提升 不参与更新的元素会做静态提升只会被创建一次在渲染时直接复用免去了重复的创建节点事件监听缓存 当一个事件监听器被创建时它会被缓存起来并在下次重新渲染时重复使用除非监听器的依赖发生了变化才会重新创建。这样就避免了不必要的函数创建和销毁提高了性能。SSR 优化 当静态内容大到一定量级时候会用createStaticVNode方法在客户端去生成一个static node这些静态node会被直接innerHtml就不需要创建对象然后根据对象渲染源码体积优化 vue3 整体体积变小移除了不常用的 API 移除 filter 过滤器使用计算属性和方法可以实现移除 v-on.native 修饰符值用使用v-on直接来监听原生事件$on, $off, $once 方法: 在 Vue.js 3 中不再推荐直接访问实例上的 $on, $off, $once 方法来进行事件的监听和解绑而是使用 Composition API 提供的 onMounted, onUnmounted, onBeforeUnmount 等生命周期钩子函数来进行事件的绑定和解绑。 vue2 中的$on 本质上是基于发布-订阅模式实现的vue3 不支持之后我们可以自己实现订阅发布或者使用第三方库 vue/event-emittermitt使用 tree-shaking 原理是 esm 的静态编译响应式系统的优化 vue3 使用 proxy 可以动态监听对象属性的添加可以监听数组的索引和数组length属性可以监听删除属性语法/api的优化 组合式API
