vue3.0比vue2.0更快的原因

文章目录

vux3.x性能比vue2.x快1.2~2倍diff方法优化静态提升事件侦听器缓存ssr优化

扩展阅读

vux3.x性能比vue2.x快1.2~2倍

①diff方法优化 ②静态提升 ③事件侦听器缓存 ④ssr渲染

diff方法优化

vue2.0中的虚拟dom是进行全量的对比 vue3.0新增了静态标记(PatchFlag)，在于上次虚拟节点进行对比的时候，只对比带有patch flag的节点。并且可以通过flag的信息得知当前节点要对比的具体内容。

静态标记枚举类：

静态提升

vue2.0无论元素是否参与更新，每次都会重新创建，然后再渲染 vue3.0对于不参与更新的元素，会做静态提升，只会被新创建一次，在渲染时直接复用即可

事件侦听器缓存

默认情况下，onClick会被视为动态绑定，所以每次都会去追踪它的变化。但是因为事件绑定的函数是同一个函数（同一个方法），所以没有追踪变化，直接缓存起来复用即可。

//事件监听缓存未开启之前

按钮

//开启事件监听缓存之前（把静态提升关闭了也是这样）

export function render(_ctx, _cache, $props, $setup, $data, $options) {

return (_openBlock(), _createBlock("div", null, [

_createVNode("button", { onClick: _ctx.onClick }, "按钮", 8 /* PROPS */, ["onClick"])

]))

}

//开启事件监听缓存之后（把options选择为cacheHandlers）

export function render(_ctx, _cache, $props, $setup, $data, $options) {

return (_openBlock(), _createBlock("div", null, [

_createVNode("button", {

onClick: _cache[1] || (_cache[1] = (...args) => (_ctx.onClick(...args)))

}, "按钮")

]))

}

验证： 【注意】转换之后的代码，大家可能还看不懂，但是不要紧。因为只需要观察有没有静态标记即可，因为在Vue3的diff算法中，只有有静态标记的才会进行比较，才会进行追踪。

ssr优化

传统的SPA单一页面响应，即客户端渲染的模式

Vue.js构建的应用程序，默认情况下是有一个html模板页，然后通过webpack打包生成一堆js、css等等资源文件。然后塞到index.html中

用户输入url访问页面 -> 先得到一个html模板页 -> 然后通过异步请求服务端数据 -> 得到服务端的数据 -> 渲染成局部页面 -> 用户

这样一来，必然延长了首屏加载的时间

SSR（服务端渲染）可以将同一个组件渲染为服务器端的 HTML 字符串，将它们直接发送到浏览器，最后将这些静态标记"激活"为客户端上完全可交互的应用程序。

简单点说：就是将页面在服务端渲染完成后在客户端直接显示。无需等待所有的 JavaScript 都完成下载并执行，才显示服务器渲染的标记，所以你的用户将会更快速地看到完整渲染的页面。 ssr原理图 vue官方关于ssr的介绍 https://ssr.vuejs.org/zh/#%E4%BB%80%E4%B9%88%E6%98%AF%E6%9C%8D%E5%8A%A1%E5%99%A8%E7%AB%AF%E6%B8%B2%E6%9F%93-ssr-%EF%BC%9F

扩展阅读

Vue 3 相对于 Vue 2 带来了一些显著的改进和性能优势。以下是 Vue 3 比 Vue 2 更好的一些主要方面：

性能提升：

Vue 3 的虚拟 DOM（Virtual DOM）性能更优，比 Vue 2 更快。Vue 3引入了多个性能优化，包括树懒加载、静态树提升、Diff 算法的改进等，这使得应用更快且更高效。 Bundle 大小更小：

Vue 3 的核心库更小，这有助于减小应用程序的包大小，提高加载速度。 Composition API：

Vue 3 引入了 Composition API，允许你更好地组织和重用组件逻辑。这使得代码更具可维护性，尤其对于大型项目和团队合作来说更有优势。 TypeScript 集成：

Vue 3 更容易与 TypeScript 集成，提供了更好的类型支持，帮助开发者在编码过程中更早地发现错误。 Teleport：

Vue 3 引入了 Teleport 组件，允许你将组件的内容渲染到 DOM 结构中的不同位置，有助于处理模态框、弹出菜单等需求。 自定义渲染器：

Vue 3 的架构更加灵活，允许开发者创建自定义渲染器，这意味着你可以将 Vue 用于更多不同的环境，如移动应用、桌面应用和静态网站生成器等。 更好的响应性：

Vue 3 的响应性系统经过改进，允许更精细的控制和更好的性能。 支持 Fragment：

Vue 3 支持