vue3.0中diff的优化和静态提升

最新推荐文章于 2024-05-14 08:30:29 发布
最新推荐文章于 2024-05-14 08:30:29 发布
阅读量591 收藏
点赞数 1
分类专栏： vue3.x 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43025587/article/details/114679422
版权

最近因项目需求，开始补学vue3.0 ，总体感觉还不赖，组合API的强大，diff算法的更新，促使项目开发比以前快个一到两倍，体积也小了。

众所周知，2020年9月18日尤雨溪发布了正式版VUE3。为了更直接的观看代码的优化。大家可以去这个网站测试了解熟悉。

https://vue-next-template-explorer.netlify.app/

例如：vue3.0中diff算法在创建虚拟DOM时候会根据内容可不可以变化来添加静态标记在这里插入图片描述
还可以在右上角进行勾选，查看更多优化地方。这里是勾选了静态提升
在这里插入图片描述

仔细观看可以发现，不参与更新的元素静态提升到了全局，渲染的时候复用即可，这也是加快了代码的执行速度。
在这里插入图片描述

更多功能还需你们去操作了解哈！

Rayong有分享
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
详解vue3.0 diff算法的使用(超详细)
10-15
总结，Vue 3.0的`diff`算法通过改进和优化，提升了更新虚拟DOM的效率，减少了不必要的DOM操作，从而提高了应用性能。理解`diff`的工作原理，合理使用`key`，以及优化组件结构，都是提升Vue应用性能的关键。
vue3 diff算法优化
weixin_43294560的博客
12-14 4358
事件缓存：将事件缓存，可以理解为变成静态的了 添加静态标记：Vue2 是全量 Diff，Vue3 是静态标记 + 非全量 Diff 静态提升：创建静态节点时保存，后续直接复用 使用最长递增子序列优化了对比流程：Vue2 里在 updateChildren() 函数里对比变更，在 Vue3 里这一块的逻辑主要在 patchKeyedChildren() 函数里，具体看下面 事件缓存 <button @click="handleClick">按钮</button> 编译后结果 ex.
Vue3diff算法原理和优化
frontend_frank的博客
02-27 5535
关注前端公众号【前端每日一博】前言面试官：你知道 Vue3.0 Object.difineProperty和vue3.0的proxy的区别吗？你知道 Vue3.0 diff算法原理和它有...
vue3编译优化之“静态提升”
最新发布
qq_36348403的博客
05-14 775
本文讲了vue3是如何实现编译优化之“静态提升”，静态节点无需每次执行render函数都去生成一次虚拟DOM
vue3学习—效率提升
xun__xing的博客
03-27 646
vue3效率提升一、vue3效率提升1、静态提升1.静态节点优化2.静态属性提升2、预字符串化3、缓存事件处理函数4、Block Tree 一、vue3效率提升 1、静态提升 在vue3中的app.vue文件如下： 在服务器中，template中的内容会变异成render渲染函数 最终编译后的文件： 1.静态节点优化 那么这里为什么是两部分呢？因为这就是vue3中的静态节点优化 因为静态节点没有绑定数据等，是不会响应式发生变化的那么就不需要放入render函数每次渲染的，所以编译器将静态节点提升到ren
什么是“静态树提升“（Static Tree Hoisting）？
weixin_64974855的博客
07-06 312
什么是"静态树提升"（Static Tree Hoisting）？
vue3的diff优化了哪些
only_neo的博客
06-03 637
在完整diff的过程中，采用的是 头头对比，尾尾对比，处理新增的和删除，然后处理未知子序，通过构建一个索引图来优化进一步寻找需要移除或者添加的节点，以及更新 sameVnode，通过获得未知子序的最长递增子序列，以这个最长递增子序列不动为前提，倒序遍历剩余节点，对节点进行最少的移动，完成对两个同级数组的更新，如果有儿子，继续递归（patch），最终完成对整个subTree的更新。最后，还增加了静态事件，因此在diff的过程中，如果是静态事件，事件的变化将不会引起组件的update。
vue3.0源码.zip
08-25
Vue.js 是一款非常流行的...通过深入研究这个"vue3.0源码"，你可以了解上述所有特性的实现细节，理解Vue 3.0如何通过这些改进来提升开发效率和应用性能。这对于成为 Vue.js 高级开发者或者进行框架定制是非常有帮助的。
Vue3.0 性能提升主要是通过哪几方面体现的？
09-02
总结来说，Vue3 的性能提升主要体现在编译阶段的优化，如 diff 算法的改进、静态提升、事件监听缓存和 SSR 优化等，以及新特性的引入，如 Composition API、Ref 和 Reactive 等，这些都显著提高了 Vue3 应用的运行...
面试题：Vue3.0 的设计目标是什么？做了哪些优化
09-01
Vue3.0的设计目标主要集中在提升性能、增强可维护性和提供更好的开发体验。为了实现这些目标，Vue3做出了多项重大改进和优化。 首先，Vue3实现了更小的体积。这得益于引入了tree-shaking技术，它能够有效地移除未...
面试官：Vue3.0 性能提升主要是通过哪几方面体现的？
07-22
总的来说，Vue3.0 的性能提升主要通过编译阶段的优化，如 diff 算法的改进和静态提升，以及响应式系统的升级，使得组件渲染更快，内存占用更少，开发体验更优。这些改进对于构建大型、高性能的应用程序具有重大意义...
vue3性能提升的方面（对比vue2）
暖光的博客
03-28 854
patchFlag，静态提升，预字符串化，事件缓存，vue3性能提升
Vue3中diff算法的优化和乱序比对的实现-详细步骤（包看包会）
发果叁
06-24 1124
接上回说到，当老的虚拟节点的儿子是一个数组类型，新的虚拟节点的儿子也是一个数组类型，那么就会进行diff比较当前我们处理了几种特殊情况，从头比较，从尾比较，同序列需要挂载的情况，同序列需要删除的情况，我们处理这几种特殊情况的目的是后续能够尽可能少的比较，因为一些特殊的我已经先比完了，特殊情况我已经提前处理了。便于后续进行比较，这是一种优化手段。后续我们就要进行乱序比较。我们刚才乱序比对的过程中呢，cd其实顺序是没有动的，但是我们还是一个一个的找，然后进行插入，每一项我们都做了倒序插入，其实我们刚才可以根据刚
Vue3.0 源码学习之静态提升
dongcehao的博客
09-16 1170
在 vue3.0 中，让人津津乐道的功能之一，就是静态提升功能了，这里就来简单学习一下这方面的源码 1、表现 测试地址 首先来一个表面结论：那就是 带有for、if 本身节点不会被静态提升 静态提升的不仅仅是节点，还有prop属性 2、源码分析 一切的入口 function hoistStatic(root, context) { walk(root.children, context, new Map(), // Root node is unfortu.
VUE3-diff算法中的静态提升（Static Hoisting）
weixin_64974855的博客
06-29 464
VUE3-diff算法中的静态提升（Static Hoisting）
从编译过程，理解 Vue3 静态节点提升过程（源码分析）
五柳
09-20 1314
前言 静态节点提升是「Vue3」针对 VNode 更新过程性能问题而提出的一个优化点。众所周知，在大型应用场景下，「Vue2.x」的 patchVNode 过程，即 diff 过程是非常缓慢的，这是一个十分令人头疼的问题。 虽然，对于面试常问的 diff 过程在一定程度上是减少了对 DOM 的直接操作。但是，这个减少是有一定成本的。因为，如果是复杂应用，那么就会存在父子关系非常复杂的 VNode，而这也就是 diff 的痛点，它会不断地递归调用 patchVNode，不断堆叠而成的几毫秒，最终就会造成 VN
Vue3 Diff算法总结（图文结合）
weixin_42125732的博客
02-18 1792
vue3 Diff算法总结
Vue3 性能比Vue2好的原因（diff算法优化、静态提升、事件侦听器缓存）
包磊磊的博客
02-21 2073
Vue3 diff算法优化 静态提升 hoistStatic 事件侦听器缓存 cacheHandlers 写下博客主要用来分享知识内容，并便于自我复习和总结。 如有错误之处，请各位大佬指出。 diff算法优化 首先，diff算法是虚拟DOM技术的必然产物，它会对新旧虚拟DOM作对比（即diff），然后将变化的地方更新在真实DOM上。而这其中，如何快速的判别需要变化的内容，就是Vue3.0的提升。具体来看： 在Vue2.0当中，当数据发生变化，它就会新生成一个DOM树，并和之前的DOM树进行比较，找到不同
vue3.0中setup 中导入 静态图片 页面不显示
05-31
在Vue 3.0中，可以使用`import`语句将静态图片导入到组件中。但是，需要注意以下几点： 1. 静态图片需要放在`public`目录下。在导入时，需要使用相对于`public`目录的路径。 2. 在`setup`函数中，需要使用`ref`或`reactive`将图片绑定到响应式变量上，才能在模板中使用。 下面是一个示例代码，可以在`setup`中导入一张静态图片并在模板中显示： ``` <template> <div> <img :src="imageSrc" alt="静态图片"> </div> </template> <script> import { ref } from 'vue'; export default { setup() { const imageSrc = ref('/img/logo.png'); // 导入静态图片 return { imageSrc }; } }; </script> ``` 需要注意，如果`imageSrc`是一个普通的字符串变量，而不是通过`ref`或`reactive`绑定到响应式变量上，那么当图片的URL发生变化时，模板不会自动更新。因此，建议在`setup`中使用`ref`或`reactive`来绑定图片。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Rayong有分享

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值