Vue3.0 编译做了哪些优化
2024-10-21 09:57:16
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 算法优化
最新文章
- XML技术之DOM4J解析器
- Hibernate学习笔记4
- virtualbox桥接网络配置--CentOS
- MS SQLServer 操作XML语句的存储过程
- hdu4920 Matrix multiplication 模3矩阵乘法
- [FAQ]String（字串相連）與StringBuilder的差別、原理與優缺點？
- 如何创建PostgreSQL数据库
- mxGraph实现按住ctrl键盘拖动图形实现复制图形功能
- （转载）[FFmpeg]使用ffmpeg从各种视频文件中直接截取视频图片
- DSP TMS320C6000基础学习（6）—— gel文件
- 很郁闷，七日筑基C#第二天的内容未保存
- [LeetCode]题解（python）：076-Minimum Window Substring
- Changing a remote's URL
- 基于 Asp.Net Core MVC 的 Angular4 SSR 英雄指南
- mysql字符集校对
- UML与软件建模：第二次作业（类图中类的表示）
- multi函数
- k8s授权访问
- API - jQuery之操作cookie(转)
- wamp 开启短标签支持