Vue3比Vue2快在哪里?

简介: 本文分析了Vue 3相比Vue 2在性能提升的几个关键点,包括改进的diff算法、静态标记、静态提升、事件监听器缓存以及SSR渲染优化,这些改进使得Vue 3在处理大规模应用时更加高效。

Vue3比Vue2快在哪里?

1.diff算法

在Vue2中进行的是全量比较,在vdom树中,按照行进行比较改dom节点的所以属性以及方法,当没有变化的时候会进行children层左树进行全量比较,最后右树,当右树有改变的时候,直接改变右树整个vdom。
Vue3比较的是有静态标记的vdom。不会每一次全部作比较,只是比较有patchflag标记的vdom节点。在与上次虚拟节点进行对比的时候,值对比带有patchflag的节点,并且可以通过flag的信息得知当前节点要对比的具体内容。

2.静态标记

Vue 3 Template Explorerhttps://vue-next-template-explorer.netlify.app/
在这里插入图片描述

将有可能改变的vdom节点添加patchflag标记,有了静态标记值,会在diff的时候找对应的属性来进行对比,进而不需要进行全量、全属性对比,Vue3就是快。

dom节点:

<div>
  <p>我是第一个p的内容</p>
  <p>我是第二个p的内容</p>
  <p>{
  {mssage}}</p>
</div>
AI 代码解读

vdom对象:

import {
    createVNode as _createVNode, toDisplayString as _toDisplayString, openBlock as _openBlock, createBlock as _createBlock } from "vue"

export function render(_ctx, _cache, $props, $setup, $data, $options) {
   
  return (_openBlock(), _createBlock("div", null, [
    _createVNode("p", null, "我是第一个p的内容"),
    _createVNode("p", null, "我是第二个p的内容"),
    _createVNode("p", null, _toDisplayString(_ctx.mssage), 1 /* TEXT */)
  ]))
}
AI 代码解读

_createVNode(“p”, null, _toDisplayString(_ctx.mssage), 1 /* TEXT */)
上面的 1 可以看上面的图片,我们可以看到1代表文本,意思就是该节点后期文本可能会变化,标记起来,还有为了在diff的时候两个vdom进行patch的时候只对比有flag的。

3.静态提升

Vue2中无论元素是否参与更新,每次都会重新创建,然后在渲染。
Vue3中对于不参加更新的元素,会做静态提升,只会被创建一次,在渲染时直接复用即可,将没有静态标记的vdom提升到顶端,不再重新渲染。

dom节点:

<div>
  <p>我是第一个p的内容</p>
  <p>我是第二个p的内容</p>
  <p>{
  {mssage}}</p>
</div>
AI 代码解读

静态提升后的vdom

import {
    createVNode as _createVNode, toDisplayString as _toDisplayString, openBlock as _openBlock, createBlock as _createBlock } from "vue"

const _hoisted_1 = /*#__PURE__*/_createVNode("p", null, "我是第一个p的内容", -1 /* HOISTED */)
const _hoisted_2 = /*#__PURE__*/_createVNode("p", null, "我是第二个p的内容", -1 /* HOISTED */)

export function render(_ctx, _cache, $props, $setup, $data, $options) {
   
  return (_openBlock(), _createBlock("div", null, [
    _hoisted_1,
    _hoisted_2,
    _createVNode("p", null, _toDisplayString(_ctx.mssage), 1 /* TEXT */)
  ]))
}
AI 代码解读

可以看到生成了两个变量 _hoisted_1 、_hoisted_2 来存储我们生成的前两个p标签,这样就不需要再次生成,直接复用即可。

4.事件监听器缓存

默认情况下onclick会被视为动态绑定,所以每次都会去追踪它的变化,但是因为是同一个函数,所以没有追踪变化,直接缓存起来复用即可。
不再跟踪标记,缓存到内存中

5.ssr渲染

当有大量静态内容的是时候,这些内容会被当做纯字符串推进一个buffer里面,即使存在动态绑定,会通过模板插槽嵌入进去,这样会比通过虚拟dom来渲染的快很多。
当静态内容达到一定量级的时候,会用_createStaticVNode方法在客户端生成一个static node,这些静态node,会被直接innerHTML,就不需要创建对象,然后根据对象渲染。

dom节点:

<div>
  <p>我是第一个p的内容</p>
  <p>我是第二个p的内容</p>
  <p>{
  {mssage}}</p>
</div>
AI 代码解读

ssr渲染后的vdom

import {
    mergeProps as _mergeProps } from "vue"
import {
    ssrRenderAttrs as _ssrRenderAttrs, ssrInterpolate as _ssrInterpolate } from "@vue/server-renderer"

export function ssrRender(_ctx, _push, _parent, _attrs, $props, $setup, $data, $options) {
   
  const _cssVars = {
    style: {
    color: _ctx.color }}
  _push(`<div${
     
    _ssrRenderAttrs(_mergeProps(_attrs, _cssVars))
  }><p>我是第一个p的内容</p><p>我是第二个p的内容</p><p>${
     
    _ssrInterpolate(_ctx.mssage)
  }</p></div>`)
}
AI 代码解读

xxx

虚拟dom主要是借鉴了snabbdom库,这是一个虚拟dom库,init函数返回一个patch函数,这个函数用于对于上一个虚拟dom和本次生成的虚拟dom,函数内部就是diff在处理,使用snabbdom中的h函数生成vdom。

目录
相关文章
Vue3中v-model在处理自定义组件双向数据绑定时有哪些注意事项?
在使用`v-model`处理自定义组件双向数据绑定时,要仔细考虑各种因素,确保数据的准确传递和更新,同时提供良好的用户体验和代码可维护性。通过合理的设计和注意事项的遵循,能够更好地发挥`v-model`的优势,实现高效的双向数据绑定效果。
156 64
Vue 3 中 v-model 与 Vue 2 中 v-model 的区别是什么?
总的来说,Vue 3 中的 `v-model` 在灵活性、与组合式 API 的结合、对自定义组件的支持等方面都有了明显的提升和改进,使其更适应现代前端开发的需求和趋势。但需要注意的是,在迁移过程中可能需要对一些代码进行调整和适配。
128 60
vue3使用pinia中的actions,需要调用接口的话
通过上述步骤,您可以在Vue 3中使用Pinia和actions来管理状态并调用API接口。Pinia的简洁设计使得状态管理和异步操作更加直观和易于维护。无论是安装配置、创建Store还是在组件中使用Store,都能轻松实现高效的状态管理和数据处理。
69 3
Vue3中v-model在处理自定义组件双向数据绑定时,如何避免循环引用?
Web 组件化是一种有效的开发方法,可以提高项目的质量、效率和可维护性。在实际项目中,要结合项目的具体情况,合理应用 Web 组件化的理念和技术,实现项目的成功实施和交付。通过不断地探索和实践,将 Web 组件化的优势充分发挥出来,为前端开发领域的发展做出贡献。
46 8
除了provide/inject,Vue3中还有哪些方式可以避免v-model的循环引用?
需要注意的是,在实际开发中,应根据具体的项目需求和组件结构来选择合适的方式来避免`v-model`的循环引用。同时,要综合考虑代码的可读性、可维护性和性能等因素,以确保系统的稳定和高效运行。
41 1
|
2月前
|
Vue3中使用provide/inject来避免v-model的循环引用
`provide`和`inject`是 Vue 3 中非常有用的特性,在处理一些复杂的组件间通信问题时,可以提供一种灵活的解决方案。通过合理使用它们,可以帮助我们更好地避免`v-model`的循环引用问题,提高代码的质量和可维护性。
50 1
在 Vue 3 中,如何使用 v-model 来处理自定义组件的双向数据绑定?
需要注意的是,在实际开发中,根据具体的业务需求和组件设计,可能需要对上述步骤进行适当的调整和优化,以确保双向数据绑定的正确性和稳定性。同时,深入理解 Vue 3 的响应式机制和组件通信原理,将有助于更好地运用 `v-model` 实现自定义组件的双向数据绑定。
Vue.js响应式原理深度解析:从Vue 2到Vue 3的演进
Vue.js响应式原理深度解析:从Vue 2到Vue 3的演进
73 0
|
14天前
|
vue使用iconfont图标
vue使用iconfont图标
81 1
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等