Vue 3.0在编译方面有哪些优化?

77hu尾2021-10-22 15:16

vue.js 3.x中标记和提升所有的静态节点,diff的时候只需要对比动态节点内容;

Vue 3.0在编译方面有哪些优化?

Fragments(升级vetur插件):

template中不需要唯一根节点,可以直接放文本或者同级标签

静态提升(hoistStatic),当使用hoistStatic时,所有静态的节点都被提升到render方法之外.只会在应用启动的时候被创建一次,之后使用只需要应用提取的静态节点,随着每次的渲染被不停的复用。

patch flag,在动态标签末尾加上相应的标记,只能带patchFlag的节点才被认为是动态的元素,会被追踪属性的修改,能快速的找到动态节点,而不用逐个逐层遍历,提高了虚拟dom diff的性能。

缓存事件处理函数cacheHandler,避免每次触发都要重新生成全新的function去更新之前的函数tree shaking通过摇树优化核心库体积,减少不必要的代码量。

Vue3.0从入门到精通,点击下方图片免费领取。

 

免责声明:本站所提供的内容均来源于网友提供或网络搜集,由本站编辑整理,仅供个人研究、交流学习使用。如涉及版权问题,请联系本站管理员予以更改或删除。
有用
分享
全部评论快来秀出你的观点
登录 后可发表观点…
发表
暂无评论,快来抢沙发!
云开发实战特训营