Vue2 和 Vue3 性能比较小实验

CodeNebula
• 阅读 2654

分别使用 Vue2 和 Vue3 创建一个组件,用一个对象数组作为组件的状态,以它的长度作为变量,考察 Vue2 和 Vue3 性能。

内存占用

数组长度Vue2Vue3
110.2 MB11.1 MB
10 00017.9 MB12.1 MB
100 00067.4 MB14.4 MB
1 000 000568 MB36.0 MB

初始化时间

数组长度Vue2Vue3
17.2 ms7.8 ms
10 000110 ms6.9 ms
100 000803 ms6.7 ms
1 000 0002282 ms7.0 ms

测试代码

Vue2

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
  <div id="app">{{ message }}</div>

  <script>
    const len = 1000000
    const arr = new Array(len)
    for (let i = 0; i < len; i++) {
      arr[i] = { id: i, name: 'test' }
    }
    
    console.time('vue2:')
    new Vue({
      el: '#app',
      data() {
        return {
          message: 'Hello Vue!',
          arr
        }
      },
      created() {
        console.timeEnd('vue2:')
      }
    })
  </script>
</body>
</html>

Vue3

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
  <div id="app">{{ message }}</div>

  <script>
    const { createApp } = Vue

    const len = 1000000
    const arr = new Array(len)
    for (let i = 0; i < len; i++) {
      arr[i] = { id: i, name: 'test' }
    }

    console.time('vue3:')
    createApp({
      data() {
        return {
          message: 'Hello Vue!',
          arr
        }
      },
      created() {
        console.timeEnd('vue3:')
      }
    }).mount('#app')
  </script>
</body>
</html>

推测

Vue2 使用Object.defineProperty()创建响应式属性,初始化时,除了遍历propsdata的每个属性,还会深度遍历子对象和子数组,重新定义它们的属性,并创建如ObserverDep实例,来观察属性变化,并且Object.defineProperty()重写的getset方法也是挂载在实例上。深度遍历加上创建这些实例的花销远大于原始对象,于是,可以看到 Vue2 无论是内存,还是初始化时间随着数组长度增加猛涨,和 Vue3 产生了明显的差距。

当数组长度到达 100 万,Vue3 内存仅增加 25 MB,但 Vue2 内存暴增了 500+ MB,这些多出来的内存便是创建这些实例产生的额外开销。观察 Vue2 内存快照,发现 Vue2 创建了 100 万个Observer实例,相当于每个对象一个(另外三个Observer实例分别用于观察组件propsdata和数组本身)。数组中每个对象有两个属性,相应创建 200 万个Dep实例,100 万个Observer实例相应创建了100 万个Dep实例,共创建超过 300 万个Dep实例。

Vue2 和 Vue3 性能比较小实验

初始化时间来看,Vue3 几乎不受数组长度影响,而 Vue2 则随数组长度明显变长。这是因为 Vue3 使用Proxy类实现响应式,系统会代理响应式对象的操作,如组件的propsdata,包括属性读取、赋值等,不会进行深度遍历。当读取响应式对象的属性时,才会创建Dep实例,如果读取的属性值也是对象时,再将这个对象响应式化,可以说 Vue3 是“懒”响应式。因此,初始化过程中 Vue3 运行时间几乎不变,如果不去操作这些属性,也几乎不会有太多内存消耗。

列表渲染

分别使用 Vue2 和 Vue3 渲染 50000 个元素:

<ul>
  <li v-for="item in arr">{{ item.id }}</li>  
</ul>

可以看出,无论是内存占用或渲染完成时间,Vue3 更占优势:

Vue2Vue3
内存124 MB53.1 MB
渲染完成时间862ms284 ms
点赞
收藏
评论区
推荐文章
晴空闲云 晴空闲云
3年前
vue3中基于script setup语法糖的$refs使用
在用vue3开发项目的时候,需要调用子组件的方法,于是想着用$refs来实现,但是我是使用scriptsetup语法糖,原先vue2的语法已经不适用了。于是一番折腾和查阅资料,终于搞定。vue2语法vue2语法在组件上设置ref属性后,在代码里可以通过this.$refs.ref值访问到对应的子组件。一个设置ref值的组件:html在js代码中可以通
LinMeng LinMeng
2年前
Vue3学习笔记---新的组件
新的组件Fragment片段在Vue2中:组件必须要有一个根标签在Vue3中:组件可以没有根标签,内部会将多个标签包含在一个Fragment虚拟元素中好处:减少标签层级,较少内存占用Teleport瞬间移动,传送什么事Teleport?Teleport是一种能够将我们的组件html结构移动到指定位置的技术
马丁路德 马丁路德
4年前
vue3 - 组件通信
vue3组件通信和vue2的通信方式基本一致,只是存在写法上的差异props/emitsetup函数接收两个参数,props和context(上下文,其中有一个emit)用法展示//父组件<template<ibutton:type'type'@onClick
Stella981 Stella981
3年前
Jira 使用手册
<tablestyle"width:100%;margin:200px0300px0;"<tr<thDate</th<thRevisionversion</th<thDescription</th<thauthor</th</tr<tr<td20180614</td<tdV1.0.0</td
Wesley13 Wesley13
3年前
Java 日期与时间
Java的日期Java没有内置的日期类,但可以导入java.time包,这个包中包含了许多类,可用于处理日期和时间。例如:<table<tbody<tr<thstyle"width:25%"Java类</th<thstyle"width:75%"描述</th</tr<tr<td<code
Wesley13 Wesley13
3年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
Vue3设计思想及响应式源码剖析 | 京东物流技术团队
一、Vue3结构分析1、Vue2与Vue3的对比对TypeScript支持不友好(所有属性都放在了this对象上,难以推倒组件的数据类型)大量的API挂载在Vue对象的原型上,难以实现TreeShaking。架构层面对跨平台dom渲染开发支持不友好,vue
融云IM即时通讯 融云IM即时通讯
6个月前
融云IM干货丨uni-app 有哪些组件库?
uniapp支持的组件库非常丰富,以下是一些常用的组件库:uView:这是一个知名的开源组件库,提供了丰富的组件,且完全开源。uViewPlus:uView的升级版,主要对标Vue3技术栈。ThorUI:组件选项类别丰富,主要对标Vue2技术栈,Vue3版
京东云开发者 京东云开发者
6个月前
Vue3设计思想及响应式源码剖析
作者:京东物流乔盼盼一、Vue3结构分析1、Vue2与Vue3的对比•对TypeScript支持不友好(所有属性都放在了this对象上,难以推倒组件的数据类型)•大量的API挂载在Vue对象的原型上,难以实现TreeShaking。•架构层面对跨平台dom
美凌格栋栋酱 美凌格栋栋酱
5个月前
Oracle 分组与拼接字符串同时使用
SELECTT.,ROWNUMIDFROM(SELECTT.EMPLID,T.NAME,T.BU,T.REALDEPART,T.FORMATDATE,SUM(T.S0)S0,MAX(UPDATETIME)CREATETIME,LISTAGG(TOCHAR(