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 编译做了哪些优化的更多相关文章

  1. vue3.0的更新和defineProperty优化?

    放弃 Object.defineProperty ,使用更快的原生 Proxy (访问对象拦截器, 也成代理器) 提速, 降低内存使用, Tree-shaking更友好 支持IE11等 使用Types ...

  2. 预计2019年发布的Vue3.0到底有什么不一样的地方？

    摘要: Vue 3.0预览. 原文:预计今年发布的Vue3.0到底有什么不一样的地方? 作者:小肆 微信公众号:技术放肆聊 Fundebug经授权转载,版权归原作者所有. 还有几个月距离 vue2 的 ...

  3. 快速进阶Vue3.0

    在2019.10.5日发布了Vue3.0预览版源码,但是预计最早需要等到 2020 年第一季度才有可能发布 3.0 正式版. 可以直接看 github源码. 新版Vue 3.0计划并已实现的主要架构改 ...

  4. Vue3.0新特性

    Vue3.0新特性 Vue3.0的设计目标可以概括为体积更小.速度更快.加强TypeScript支持.加强API设计一致性.提高自身可维护性.开放更多底层功能. 描述 从Vue2到Vue3在一些比较重 ...

  5. Vue3.0系列——「vue3.0性能是如何变快的？」

    前言 先学习vue2.x,很多2.x内容依然保留: 先学习TypeScript,vue3.0是用TS重写的,想知其然知其所以然必须学习TS. 为什么学习vue3.0? 性能比vue2.x快1.2-2倍 ...

  6. gcc都做了什么优化

    直接上程序: setjmp和longjmp是处理函数嵌套调用的,goto语句不能跨越函数,所以不选择goto. #include <setjmp.h> int setjmp(jmp_buf ...

  7. Vue3.0 Function API---------引用

    1.了解 Vue 3.0 是否有 break change,就像 Python 3 / Angular 2 一样? 不,100% 兼容 Vue 2.0,且暂未打算废弃任何 API(未来也不).之前有草 ...

  8. Vue3实战系列：Vue3.0 + Vant3.0 搭建种子项目

    最近在用 Vue3 写一个开源的商城项目,开源后让大家也可以用现成的 Vue3 大型商城项目源码来练练手,目前处于开发阶段,过程中用到了 Vant3.0,于是就整理了这篇文章来讲一下如何使用 Vue3 ...

  9. Vue3.0 响应式数据原理：ES6 Proxy

    Vue3.0 开始用 Proxy 代替 Object.defineProperty了,这篇文章结合实例教你如何使用Proxy 本篇文章同时收录[前端知识点]中,链接直达 阅读本文您将收获 JavaSc ...

  10. 从零搭建vue3.0项目架构（附带代码、步骤详解）

    前言: GitHub上我开源了vue-cli.vue-cli3两个库,文章末尾会附上GitHub仓库地址.这次把2.0的重新写了一遍,优化了一下.然后按照2.0的功能和代码,按照vue3.0的语法,完 ...

随机推荐

  1. Mybaties中的报错 Tag name expected解决

    有些时候一些小小的报错可能会没有注意到,等到报错的时候才发现,一个小小的细节也是很重要的,毕竟我们是bug生产员 来看报错的代码 when round((UNIX_TIMESTAMP(DATE_ADD ...

  2. java中使用 MultipartFile 进行文件上传而且指定了上传的临时路径，但是文件上传成功后，显示临时文件 无法删除为什么

    来自 AI BOT 回复:这是因为文件可能正在被应用程序使用,即文件已经被Java程序锁定,使得系统无法对其进行修改或删除.为了解决这个问题,你需要在保存完文件之后把它移动到正确的位置,或者在Java ...

  3. Linxu后台运行Java的jar包

    1.直接运行 java -jar myjar-0.0.1-SNAPSHOT.jar 这种方式需要一直挂载终端(Ctrl+C会结束进程.关闭shell也会结束进程),故不符合需求 2.后台运行 A.Ct ...

  4. pytest+allure接口自动化

    python类库依赖: pip3 install pytestpip3 install allure-pytestpip3 install rerequestspip3 install pytest- ...

  5. my.ini

    [client] #客户端设置,即客户端默认的连接参数 # socket = /data/mysqldata/3306/mysql.sock #用于本地连接的socket套接字 # 默认连接端口 po ...

  6. 微信小程序图片和签名

    图片上传功能 chooseImage(e) { wx.chooseImage({ sizeType: ['original', 'compressed'], //可选择原图或压缩后的图片 source ...

  7. Python学习的第三次的总结

    元组 #组内元素可读,不能被改变 tup1=() #空元组 tup2=(1,) #一个元素后添加逗号 嵌套列表 a = [[1,2,3],'lyyyyy',4,(2,3,4)] b = a[0]   ...

  8. npm ERR! Failed at the node-sass@4.14.1 postinstall script.

    我们后台要了前端源代码,启动Vue项目后出现了这几行出错信息 npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! node-sass@4.14.1 p ...

  9. mybatis-plus主键生成策略（实体类配置，数据库插入数据自动生成id）

    转载:MyBatisplus -- ActiveRecord(AR)_mybatisplus idtype.auto_憨憨浩浩的博客-CSDN博客 0.auto:自动增长(mysql,sql serv ...

  10. 视频直播源码，js实现节流和防抖

    视频直播源码,js实现节流和防抖 防抖: 就是指连续触发事件但是在设定的一段时间内中只执行最后后一次,例如:设定1000毫秒执行,当你触发事件了,他会1000毫秒后执行,但是在还剩500毫秒的时候你又 ...