Vue3为什么这么快


Posted in Javascript onSeptember 23, 2020

总所周知,程序员追求的就是一个字:快!(当然不是什么都追求快的,有些事情快起来是不行滴)

昨天Vue3.0正式发布了,激动的心,颤抖的手,摸了摸我的头发,嗯~还好。

据说Vue3.0相比Vue2.x在性能上提升了1.2~2倍,为啥他就这么快呢?

vue3.0做了以下事情

  • diff算法优化
  • 静态提升(hoistStatic)
  • 事件侦听器缓存(cacheHandlers)
  • SSR优化(看心情更新)

diff算法优化

Vue2.x的diff算法

vue2.x的diff算法叫做全量比较,顾名思义,就是当数据改变的时候,会从头到尾的进行vDom对比,即使有些内容是永恒固定不变的。

Vue3为什么这么快

Vue3.0的diff算法

vue3.0的diff算法有个叫静态标记(PatchFlag)的小玩意,啥是静态标记呢?
简单点说,就是如果你的内容会变,我会给你一个flag,下次数据更新的时候我直接来对比你,我就不对比那些没有标记的了

Vue3为什么这么快

export function render(_ctx, _cache, $props, $setup, $data, $options) {
 return (_openBlock(), _createBlock("div", null, [
  _createVNode("p", null, "'HelloWorld'"),
  _createVNode("p", null, _toDisplayString(_ctx.msg), 1 /* TEXT */)
                        //上面这个1就是静态标记
 ]))
}

那么肯定有人又会问了,为啥是个1呢?

TEXT = 1 // 动态文本节点
CLASS=1<<1,1 // 2//动态class
STYLE=1<<2,// 4 //动态style
PROPS=1<<3,// 8 //动态属性,但不包含类名和样式
FULLPR0PS=1<<4,// 16 //具有动态key属性,当key改变时,需要进行完整的diff比较。
HYDRATE_ EVENTS = 1 << 5,// 32 //带有监听事件的节点
STABLE FRAGMENT = 1 << 6, // 64 //一个不会改变子节点顺序的fragment
KEYED_ FRAGMENT = 1 << 7, // 128 //带有key属性的fragment 或部分子字节有key
UNKEYED FRAGMENT = 1<< 8, // 256 //子节点没有key 的fragment
NEED PATCH = 1 << 9, // 512 //一个节点只会进行非props比较
DYNAMIC_SLOTS = 1 << 10 // 1024 // 动态slot
HOISTED = -1 // 静态节点
// 指示在diff算法中退出优化模式
BALL = -2

静态提升(hoistStatic)

Vue2.x中无论元素是否参与更新,每次都会重新创建然后渲染
Vue3.0中对不参与更新的元素,会做静态提升,只会被创建一次,在渲染时直接复用即可
还是这段熟悉的代码,开启静态提升前 

export function render(_ctx, _cache, $props, $setup, $data, $options) {
 return (_openBlock(), _createBlock("div", null, [
  _createVNode("p", null, "'HelloWorld'"),
  _createVNode("p", null, "'HelloWorld'"),
  _createVNode("p", null, _toDisplayString(_ctx.msg), 1 /* TEXT */)
 ]))
}

开启静态提升后编译结果 

const _hoisted_1 = /*#__PURE__*/_createVNode("p", null, "'HelloWorld'", -1 /* HOISTED */)
const _hoisted_2 = /*#__PURE__*/_createVNode("p", null, "'HelloWorld'", -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.msg), 1 /* TEXT */)
 ]))
}

可以看到开启了静态提升后,直接将那两个内容为helloworld的p标签声明在外面了,直接就拿来用了,这么搞的话那肯定会快啊 

事件侦听器缓存

默认情况下onClick会被视为动态绑定,所以每次都会去追踪它的变化
但是因为是同一个函数,所以没有追踪变化,直接缓存起来复用即可
dom结构

<div>
 <button @click = 'onClick'>点我</button>
</div>

开启事件侦听器缓存之前: 

export const render = /*#__PURE__*/_withId(function render(_ctx, _cache, $props, $setup, $data, $options) {
 return (_openBlock(), _createBlock("div", null, [
  _createVNode("button", { onClick: _ctx.onClick }, "点我", 8 /* PROPS */, ["onClick"])
                       // PROPS=1<<3,// 8 //动态属性,但不包含类名和样式
 ]))
})

这里有一个8,表示着这个节点有了静态标记,有静态标记就会进行diff算法对比差异,所以会浪费时间

开启事件侦听器缓存之后: 

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为什么这么快的文章就介绍到这了,更多相关Vue3 快内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
Jquery 组合form元素为json格式,asp.net反序列化
Jul 09 Javascript
jquery nth-child()选择器的简单应用
Jul 10 Javascript
jQuery 如何先创建、再修改、后添加DOM元素
May 20 Javascript
移动端基础事件总结与应用
Jan 12 Javascript
js仿新浪微博消息发布功能
Feb 17 Javascript
解决vue2.x中数据渲染以及vuex缓存的问题
Jul 13 Javascript
r.js来合并压缩css文件的示例
Apr 26 Javascript
vue .js绑定checkbox并获取、改变选中状态的实例
Aug 24 Javascript
微信小程序多音频播放进度条问题
Aug 28 Javascript
vue mounted 调用两次的完美解决办法
Oct 29 Javascript
简单两步使用node发送qq邮件的方法
Mar 01 Javascript
JavaScript的查询机制LHS和RHS解析
Aug 16 Javascript
Angular短信模板校验代码
Sep 23 #Javascript
JavaScript实现单点登录的示例
Sep 23 #Javascript
Vue+Java+Base64实现条码解析的示例
Sep 23 #Javascript
通过实例解析jQ Ajax操作相关原理
Sep 23 #Javascript
js实现三角形粒子运动
Sep 22 #Javascript
js操作两个json数组合并、去重,以及删除某一项元素
Sep 22 #Javascript
js实现删除json中指定的元素
Sep 22 #Javascript
You might like
PHP+SQL 注入攻击的技术实现以及预防办法
2010/12/29 PHP
php中使用explode查找某个字符是否存在的方法
2011/07/12 PHP
PHP的Laravel框架结合MySQL与Redis数据库的使用部署
2016/03/21 PHP
深入理解PHP中的empty和isset函数
2016/05/26 PHP
js实现的网站首页随机公告随机公告
2007/03/14 Javascript
JavaScript与Div对层定位和移动获得坐标的实现代码
2010/09/08 Javascript
js页面跳转的常用方法整理
2013/10/18 Javascript
Javascript写入txt和读取txt文件示例
2014/02/12 Javascript
Javascript表单验证要注意的事项
2014/09/29 Javascript
JavaScript数据结构与算法之栈详解
2015/03/12 Javascript
非常实用的js验证框架实现源码 附原理方法
2016/06/08 Javascript
微信小程序表单验证错误提示效果
2017/05/19 Javascript
详解Vue webapp项目通过HBulider打包原生APP
2018/06/29 Javascript
Vue CLI3创建项目部署到Tomcat 使用ngrok映射到外网
2019/05/16 Javascript
Javascript和jquery在selenium的使用过程
2019/10/31 jQuery
[42:00]完美世界DOTA2联赛PWL S3 Phoenix vs INK ICE 第一场 12.13
2020/12/17 DOTA
python开发中module模块用法实例分析
2015/11/12 Python
1分钟快速生成用于网页内容提取的xslt
2018/02/23 Python
基于anaconda下强大的conda命令介绍
2018/06/11 Python
详解Python利用random生成一个列表内的随机数
2019/08/21 Python
pandas分组聚合详解
2020/04/10 Python
Python smtp邮件发送模块用法教程
2020/06/15 Python
python 合并多个excel中同名的sheet
2021/01/22 Python
德国家具在线:Fashion For Home
2017/03/11 全球购物
Pretty Little Thing爱尔兰:时尚女性服饰
2017/03/27 全球购物
XD健身器材:Kevlar球、Crossfit健身球
2019/03/26 全球购物
幼儿园中班教学反思
2014/02/10 职场文书
酒店员工职业生涯规划
2014/02/25 职场文书
报纸媒体创意广告词
2014/03/17 职场文书
检讨书范文
2015/01/27 职场文书
大学生求职简历自我评价
2015/03/02 职场文书
情感电台广播稿
2015/08/18 职场文书
2016幼儿园毕业感言
2015/12/08 职场文书
AJAX学习笔记
2021/05/18 Javascript
教你用Python+selenium搭建自动化测试环境
2021/06/18 Python
详细聊聊关于Mysql联合查询的那些事儿
2021/10/24 MySQL