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. Java中如何处理大批量照片上传,然后调用图片上传服务区接口,使用异步吗,是不是需要用到多线程

    bot回答: 可以使用多线程,在 Java 中,可以使用 ExecutorService 来实现线程池,让每一个处理上传批量照片的任务都子事与一个线程,然后分别调用图片上传服务区接口,进行图片的异步上 ...

  2. nginx通过参数代理到其他站点

    http { include mime.types; default_type application/octet-stream; resolver 8.8.8.8; ##Nginx0.6.18以后的 ...

  3. iis url重写实现http 重定向到 https

    原文链接 http://www.360doc.com/content/21/0915/21/67180130_995651104.shtml 1.在iis上安装 url重写组件 2. 修改web.co ...

  4. 51电子-STC89C51开发板:程序烧录(刷写) 到 IC 设置

    全部内容,请点击: 51电子-STC89C51开发板:<目录> ---------------------------  正文开始  --------------------------- ...

  5. Java06 面向对象

    一 什么是面向对象 面向对象编程(Object-Oriented Programming,OOP) 面向对象编程的本质就是:以类的方式组织代码,以对象组织(封装)数据. 三大特性: 封装 继承 多态 ...

  6. rt_raster_to_gdal: Could not load the output GDAL driver

    问题记录:postgis 安装后不能执行以下语句,查询入库的 tif 文件 SELECT ST_AsGDALRaster(rast, 'GTiff') As rastjpg FROM radar_da ...

  7. 读后笔记 -- Python 全栈测试开发 Chapter11:Python + Requests 实现接口测试

    11.1 Requests 框架 11.1.1 requests 请求 1. reqeusts 库 安装 pip install requests 2. requests 库 GET 方法,参数通过 ...

  8. PID模板

    typedef struct{ float Kp,Ki,Kd; float Target; float Current; float Error[3]; float DeadZone; float O ...

  9. Python学习:画K帮

    import datetime import pandas_datareader.data as web df_stockload = web.DataReader("600797.SS&q ...

  10. 集群分发xsync xcall kafka启动脚本命令,命令方式安装epel源

    安装epel库源 yum install epel-release -y --nogpgcheck yum install glances 安装开始 建立hosts 白名单 127.0.0.1 loc ...