vue3为什么快?vue3的效率提升主要在哪方面?总结
时间:2022-04-26 [网络编程]作者:fabuyuan 浏览:6 次
尤大大在介绍vue3说客户端的渲染效率比vue2提升了1.3-2倍, SSR渲染效率比 vue2 提升了2-3倍。
对静态节点的提升
什么是静态节点?
所谓的静态节点就是在 vue 中的写在 template
模板中的 标签 并且该标签没有使用 v-bind
绑定属性, 在 vue3 就认为是 静态节点。(学习视频分享:vuejs教程)
<template > <img src="/_assets/logo.102c1acc.jpg" alt="logo"> // 静态节点 没有绑定任何属性 <h1>Hello World</h1> // 静态节点 没有绑定任何属性 <h1>{{ text }}</h1> </template> <script> export default { data() { return { text: 'Hello World', } }, } </script>
vue3 就会在 render
函数中将 静态节点 用变量保存下来, 所以该静态节点只会创建一次。
// vue2 的静态节点 render(){ createVNode("h1", null , "Hello World") } // vue3 的静态节点 const h1 = createVNode("h1", null , "Hello World") render(){ // 直接使用即可 }
为了证明这一点, 本地创建一个 vue3 的项目, 看网络请求
静态属性也会被提升
<template > <div class="container"> //container 这是一个静态属性 {{ text }} // 内容是动态的 </div> </template> <script> export default { data() { return { text: 'Hello World', } }, } </script>
container
也会使用变量保存
预字符串化
在实际的开发中, template
中实际很大一部分都是静态节点
<template > <div class="container"> <div class="logo"> <h1>logo</h1> </div> <ul class="nav"> <li><a href="">菜单</a></li> <li><a href="">菜单</a></li> <li><a href="">菜单</a></li> <li><a href="">菜单</a></li> </ul> <div class="user"> {{ user.name }} </div> </div> </template> <script> export default { data() { return { user: { name: '张三' } } }, } </script>
vue3 的编译器遇到大量的连续的静态节点, 会直接将其编译为一个普通的字符创节点
.logo .nav
整个 div 都是静态节点, 如果按照 vue2 的处理方式会进行 递归创建处理
而在 vue3 直接转化为一个字符串, 然后在创建真实 dom 是赋值给 innerHTML 属性, 就减少了 vue2 中的递归创建时间
预字符串化的性能提升不紧紧在第一次创建时的提升, 当在 render 函数重新渲染时的提升减少了大量的虚拟节点的对比时间(非常恐怖)
缓存事件处理函数
<template > <button @click="handleClick">点一下</button> </template> <script> export default { data() { return { } }, methods: { handleClick() { console.log('点击了') } }, } </script>
handleClick
事件,对比一下 vue2 和 vue3 的处理方式
// vue2 render(ctx){ return createVNode("button",{ onclick: function ($event) { console.log('点击了') } }) } // vue3 export function render(_ctx, _cache, $props, $setup, $data, $options) { return (_openBlock(), _createBlock("button", { onClick: _cache[1] || (_cache[1] = (...args)=>($options.handleClick && $options.handleClick(...args))) }, "点一下")) }
_cache[1] || (_cache[1] = (...args)=>($options.handleClick && $options.handleClick(...args)))
这段代码就是对事件函数的缓存
Block Tree
vue3 在对虚拟节点树对比时也做了优化
vue2 在对比新旧节点树时, 并不知道那些节点是静态的, 那些节点是动态的, 因此只能一层一层的比较,这就导致浪费了大量的时间在静态节点对比上
vue3 是如何进行对比的, 其实在当在创建节点时有有一个标记记录了该节点的类型
这里的 -1 其实就是标记该节点的类型, 所以当在 Block Tree 时, 根据该标记就能直接跳过对静态节点的对比, 从而达到减少对比的时间。
PatchFlag
PatchFlag 是对 Block Tree 进一步优化, 在对比单个节点的时, 会对比属性, 内容等等。
vue2 在单个节点对比时不知道那些是要对比的所以全部对比一次
vue3 就知道那些属性是动态的, 每次更新只对比动态的属性
<template > <div class="logo"> <h1>{{ text }}</h1> </div> </template> <script> export default { data() { return { text: 'Hello World', } }, } </script>
l.logo
中只有 h1
的内容是动态的所以在创建标虚拟节点时就是做标记
这里的1就是标记该内容是动态的, 所以在进行对比时就只对比 内容 是否变化, 就极大的缩短了对比时间(恐怖如斯)
总结
上面的优化都依托于 vue3强大的编译器 恐怖如斯
(学习视频分享:web前端开发、编程入门)
以上就是vue3为什么快?vue3的效率提升主要在哪方面?的详细内容,更多请关注站长家园其它相关文章!
本文标签: Vue
转载请注明来源:vue3为什么快?vue3的效率提升主要在哪方面?总结
本文永久链接地址:https://www.adminjie.com/post/11649.html
免责声明:
本站所发布的一切资源仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。本站信息来自网络,版权争议与本站无关。您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容。如果您喜欢该程序,请支持正版软件,购买注册,得到更好的正版服务。
附:
二○○二年一月一日《计算机软件保护条例》第十七条规定:为了学习和研究软件内含的设计思想和原理,通过安装、显示、传输或者存储软件等方式使用软件的,可以不经软件著作权人许可,不向其支付报酬!鉴于此,也希望大家按此说明研究软件!
版权声明:
一、本站致力于为软件爱好者提供国内外软件开发技术和软件共享,着力为用户提供优资资源。
二、本站提供的部分源码下载文件为网络共享资源,请于下载后的24小时内删除。如需体验更多乐趣,还请支持正版。
三、我站提供用户下载的所有内容均转自互联网。如有内容侵犯您的版权或其他利益的,若有侵犯你的权益请:提交版权证明文件到邮箱 2225329873#qq.com(#换为@) 站长会进行审查之后,情况属实的会在三个工作日内为您删除。
更多精彩内容
- VUE中V-IF条件判断改变元素的样式操作
- Discuz如何解决安装时报错run_sql_error
- 低版本VS项目在VS2019无法正常编译的问题
- PHP+Redis链表解决高并发下商品超卖问题(实现原理及步骤)
- Oracle数据库的实例/表空间/用户/表之间关系简单讲解
- RSA2是啥?PHP-RSA2签名验证怎么实现?
- 华为dubal20是什么型号
- ana an00华为是什么型号
- html5的标题标记一共有几个等级
- app是什么应用程序的简称
- html5中onclick是什么意思
- 电脑显示信号线无连接是什么意思
- 小程序大小超限除了分包还能怎么做?如何避免和解决大小限制?
- angular与bootstrap的区别是什么
- vivov1818a是什么手机型号

- 最新文章
-
-
实用Word技巧分享:轻松输入省略号的几种方法
在之前的文章《实用Word技巧分享:巧用“查找替换”+“通配符”来提取数据》中,我们学习了利用“查找替换”+“通配符”提取数据的方法。今天继续实用Word技巧分...
-
详细介绍python的numpy模块
本篇文章给大家带来了关于python的相关知识,其中主要介绍了关于numpy模块的相关问题,Numpy是NumericalPythonextensions的...
-
整理分享Java语言表达式的五个谜题
本篇文章给大家带来了关于java的相关知识,其中主要介绍了关于语言表达式的相关问题,其中包括了奇数性、找零、长整数等等内容,下面一起来看一下,希望对大家有帮助。...
-
MySQL学习之DDL、DML及DQL基础总结
本篇文章给大家带来了关于mysql的相关知识,其中主要介绍了关于DDL、DML、DQL的相关内容,包括了操作数据表、操作数据库、简单查询数据等等内容,下面一起来...
-
JavaScript怎么实现基础类型和对象一样有属性和方法
本篇文章给大家带来了关于javascript的相关知识,其中主要介绍了关于基础类型和对象一样有属性和方法的相关问题,包括了基础类型当做对象使用以及基础类型构造函...
-
- 热门文章
-
-
VUE中V-IF条件判断改变元素的样式操作
这篇文章主要介绍了VUE中V-IF条件判断改变元素的样式操作,具有很好的参考价值,希望对大家有所帮助。一起跟随想过来看看吧...
-
Discuz如何解决安装时报错run_sql_error
问题环境VMware虚拟机Centos7.3PHP7.0MySQL8.0NGINX1.14Discuz3.4问题还原本地环境为PHP5.6+MySQL5.6在安...
-
低版本VS项目在VS2019无法正常编译的问题
低版本VS项目在VS2019无法正常编译的问题这里指的编译并不准确,只是为了方便说明。后有(未安装),201?...
-
PHP+Redis链表解决高并发下商品超卖问题(实现原理及步骤)
实现原理使用redis链表来做,因为pop操作是原子的,即使有很多用户同时到达,也是依次执行,推荐使用。实现步骤第一步,先将商品库存入队列/**.trigge...
-
Oracle数据库的实例/表空间/用户/表之间关系简单讲解
完整的Oracle数据库通常由两部分组成:Oracle数据库和数据库实例。Oracle是一种数据库管理系统,是一种关系型的数据库管理系统。我们用这些高级权限账号...
-