Vue3.0 编译做了哪些优化
a. 生成 Block tree Vue.js 2.x 的数据更新并触发重新渲染的粒度是组件级的,单个组件内部 需要遍历该组 件的整个 vnode 树。在 2.0 里,渲染效率的快慢与组件大小成正相关:组件越大,渲染 效率越慢。并且,对于一些静态节点,又无数据更新,这些遍历都是性能浪费。 Vue.js 3.0 做到了通过编译阶段对静态模板的分析,编译生成了 Block tree。 Block tree 是一个将模版基于动态节点指令切割的嵌套区块,每个 区块内部的节点结构是固定的, 每个区块只需要追踪自身包含的动态节点。所以,在 3.0 里,渲染效率不再与模板大小 成正相关,而是与模板中动态节点的数量成正相关。
b. slot 编译优化 Vue.js 2.x 中,如果有一个组件传入了 slot,那么每次父组件更新的时候,会强制使子组 件 update,造成性能的浪费。 Vue.js 3.0 优化了 slot 的生成,使得非动态 slot 中属性的更新只会触发子组件的更新。 动态 slot 指的是在 slot 上面使用 v-if,v-for,动态 slot 名字等会导致 slot 产生运行时动 态变化但是又无法被子组件 track 的操作。
c. diff 算法优化
Vue3.0 编译做了哪些优化的更多相关文章
- vue3.0的更新和defineProperty优化?
放弃 Object.defineProperty ,使用更快的原生 Proxy (访问对象拦截器, 也成代理器) 提速, 降低内存使用, Tree-shaking更友好 支持IE11等 使用Types ...
- 预计2019年发布的Vue3.0到底有什么不一样的地方?
摘要: Vue 3.0预览. 原文:预计今年发布的Vue3.0到底有什么不一样的地方? 作者:小肆 微信公众号:技术放肆聊 Fundebug经授权转载,版权归原作者所有. 还有几个月距离 vue2 的 ...
- 快速进阶Vue3.0
在2019.10.5日发布了Vue3.0预览版源码,但是预计最早需要等到 2020 年第一季度才有可能发布 3.0 正式版. 可以直接看 github源码. 新版Vue 3.0计划并已实现的主要架构改 ...
- Vue3.0新特性
Vue3.0新特性 Vue3.0的设计目标可以概括为体积更小.速度更快.加强TypeScript支持.加强API设计一致性.提高自身可维护性.开放更多底层功能. 描述 从Vue2到Vue3在一些比较重 ...
- Vue3.0系列——「vue3.0性能是如何变快的?」
前言 先学习vue2.x,很多2.x内容依然保留: 先学习TypeScript,vue3.0是用TS重写的,想知其然知其所以然必须学习TS. 为什么学习vue3.0? 性能比vue2.x快1.2-2倍 ...
- gcc都做了什么优化
直接上程序: setjmp和longjmp是处理函数嵌套调用的,goto语句不能跨越函数,所以不选择goto. #include <setjmp.h> int setjmp(jmp_buf ...
- Vue3.0 Function API---------引用
1.了解 Vue 3.0 是否有 break change,就像 Python 3 / Angular 2 一样? 不,100% 兼容 Vue 2.0,且暂未打算废弃任何 API(未来也不).之前有草 ...
- Vue3实战系列:Vue3.0 + Vant3.0 搭建种子项目
最近在用 Vue3 写一个开源的商城项目,开源后让大家也可以用现成的 Vue3 大型商城项目源码来练练手,目前处于开发阶段,过程中用到了 Vant3.0,于是就整理了这篇文章来讲一下如何使用 Vue3 ...
- Vue3.0 响应式数据原理:ES6 Proxy
Vue3.0 开始用 Proxy 代替 Object.defineProperty了,这篇文章结合实例教你如何使用Proxy 本篇文章同时收录[前端知识点]中,链接直达 阅读本文您将收获 JavaSc ...
- 从零搭建vue3.0项目架构(附带代码、步骤详解)
前言: GitHub上我开源了vue-cli.vue-cli3两个库,文章末尾会附上GitHub仓库地址.这次把2.0的重新写了一遍,优化了一下.然后按照2.0的功能和代码,按照vue3.0的语法,完 ...
随机推荐
- winform 子控件触发父控件事件
private void circlePanel_Click(object sender, EventArgs e) { var panel=sender as UIPanel; if (panel. ...
- 靶场练习2:cloudantvirus
靶场链接 https://www.vulnhub.com/entry/boredhackerblog-cloud-av,453/ 信息收集 练习1用了arp-scan,这种工具有可能会被防火墙流量监测 ...
- 记一次修改dotnet-cnblogs图片路径的正则匹配规则
大佬的GitHub 前言 因为最近一时心血来潮,学了markdown,我觉得但凡是个人,对于不用word或html就可以有不错的排版,而且使用起来简单便捷,都会投向markdown的怀抱中的.又因 ...
- 浅写java环境配置
我对于Java环境配置的理解: 下载JDK ==>安装JDK ==>在电脑的系统中添加JDK中所包含的Java环境 ==>重启(主要是给系统监测到环境,非必要,但是建议)==> ...
- Kongmaster
圣人处无为之事 大智若愚 穷则独善其身,达则兼济天下
- 路飞项目day01 软件开发流程、PIP永久换源、虚拟环境、路飞项目开始
一.软件开发流程(重要) 我们作为一个后端,虽然一般情况下只专注自己的那一部分事情,但是有时候小公司,人员架构没那么细化,或者老板就是想省钱少招点人,我们就得大致熟悉软件开发流程,知道上司.其他同 ...
- 性能测试-sysstat工具包(mpstat-主要查看CPU负载与iostat-看数据换入换出以及pidstat-主要看上下文切换)
1.mpstat概述 mpstat (multiprocessor state) 可以查看所有cpu的平均负载,也可以查看指定cpu的负载.所以mpstat其实就是主要查看CPU负载的一个工具.是一款 ...
- java.sql.SQLIntegrityConstraintViolationException: Duplicate entry '1' for key 'PRIMARY'
你设置的主键里面已经有一个值为1的数值了,再插入一个就重复了. 但是主键是不能重复的.
- vue 中 表单数据为数组,v-for 循环表单数据
element-ui 中,表单数据一般为对象,但是也有是数组的情况,比如上面图示:账号和密码可以是多个,点击添加会增加一条,点击删除会删除一条 表单数据为 form:{ accounts:[ { ac ...
- Enhancement S_ALR_87011964 Asset Balance Report to add custom column
Enhancement S_ALR_87011964 Asset Balance Report to add custom column - SAP Tutorial Include own fiel ...