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的语法,完 ...
随机推荐
- 地理信息技术GIS学习(3):数据表操作、图表制作、地图编辑(上海市行政区划图)
数据表操作.图表制作内容主要来自 张明明的<ArcGis 10.1 超级学习手册>,其博客的电子数据已经找不到. 一.数据表操作 ArcMap中以属性表的形式来组织和管理要素的属性信息.每 ...
- apollo兼容mysql的时候报错Table 'apolloportaldb.hibernate_sequence' doesn't exist
解决方案: 配置文件里加: spring.jpa.properties.hibernate.hbm2ddl.auto=update
- 批量添加esxi主机到Vcenter
1 连接vcenter Connect-VIServer -Protocol https -User 'administrator@vsphere.local' -Password 'Vcenter密 ...
- rtsp协议转换m3u8
目前项目中使用海康的摄像头,但需要提供实时预览.目前通过转换协议实现预览.同时能够尽量减少服务器的压力,比如生成的ts文件个数. 思路 通过ffmpeg 将rtsp协议转换成hls协议 具体步骤 1. ...
- mysql转国产数据库达梦随记
记录一下转换的一些小坑. window环境 项目是springboot+ activiti6 + vue 第一步转移数据: mysql5.7 ---> 达梦7 这里使用dm的工具进行转换.发现 ...
- CSDN上书签迁移
title: CSDN上书签迁移 date: 2020-11-01 16:34:30 img: /photos/2020.6.03_15/2020_06_11_cover.jpg summary: C ...
- Python的入门学习Day 22~24——form”夜曲编程“
Day 22 time:2021.8.19. 顺着歌曲的旋律,内心一下子就安静了呢.终于,我可以好好写日记了,徜徉在一片金色的花海里.今天主要学习了匿名函数.这是一种很有趣的函数呢,像孙悟空会72 ...
- 如何用python将txt中的package批量安装
第一步:cd 到目标路径 第二步:新建一个requirement.txt文档,将所有要下载的包一一罗列出来(需要指定版本的话,可以用==表明) 第三步:输入命令 pip install -r req ...
- Drift Programming | 漂移编程 | 哲学编程 | 架构设计 | TDD |DDD |Microservice
- solve--ifconifg命令提示没有该命令解决方法
一.如果你/bin目录下有ifconfig,则是命令路径没有在环境变量中添加,很多新装的linux系统都会存在这种问题 打开/etc/profile文件 命令: vi /et ...