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

 
 
 
 
  
  
  
  
 
  
  
  
  
  
标签
 
  
  
  
  
  
{{msg}}
 
  
  
  
  

vue2.x的diff算法是对虚拟dom树全量的对比。

vue3.0的diff算法在创建虚拟dom的时候，会根据dom中的内容是否发生变化，添加静态标记。只对比带有patch flag的节点。

vue3.0 diff算法优化

我们可能看上面这个图不是很明白，那我们就用另一种方式直观看下。你们可以看到下图中存在数据绑定的元素中存在静态标记1，测试网址：https://vue-next-template-explorer.netlify.app/。

静态标记

• hoistStatic（静态提升）

vue2.x中无论元素是否参与更新，每次都会重新创建，然后再渲染。vue3.0中对于不参与更新的元素，会做静态提升，只会被创建一次，在渲染时直接复用即可。

我们再来去那个测试网站，在静态标记的选项前面打上对号，这时我们会发现不同，右边之前数据固定不变的标签，也就是这里的

标签

静态提升

• cacheHandlers（事件侦听器缓存）

默认情况下，如onClick事件会被视为动态绑定，所以每次都会追踪它的变化，但是因为是同一个函数，所以不用追踪变化，直接缓存起来复用即可。好，我们来对比一下开启事件侦听器缓存前后。

未开启事件侦听器缓存

我们会看到有一个静态标记，所以每次都会追踪。

未开启

开启事件侦听器缓存

在事件侦听器缓存前打上对号，开启。我们看到没有了静态标记，就没有对比追踪了，性能就提升了。

开启

当前标题：Vue3.0系列——「vue3.0性能是如何变快的？」
文章网址：http://www.shufengxianlan.com/qtweb/news4/463254.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联