zoukankan      html  css  js  c++  java
  • Vue3学习-相较于v2的优劣

      有时候我自己都会认为,我v2用的好好的,学个P的v3,然而在投投补习以后,艾玛真香:

      按老师的原话说:vue3比vue2性能快上1.2~2倍!

      接下来就来说说为什么Vue3会比Vue2的性能快上这么多:

        总结大概有四点 ....

          diff算法优化(我总觉得这是一个综述):

            vue2的diff算法思路实现:对比DOM节点,其内容更新,整体重新创建渲染;

              怎么说呢?相当于我想摘个果子吃,找到果子的所在地 我直接把果树砍掉,

              摘下果子吃完后,再重新种上,然后再做回头客。这么一说感觉自己好像了解到了什么;

            vue3的diff算法思路实现:添加patchFlag标识,对比DOM节点时,只对比带有patchFlag的节点;

              这次摘果子的时候,就只需要对果子下手了。

          有图有真相:(李老师画的图)

        

          静态提升 (hoistStatic):

            不参与更新的内容(节点)做 *静态提升*,渲染时直接复用

            既然都已经可以只对果子下手,那就不需要重新种树,直接拿来用就完事了(复用)

          - 事件侦听器缓存(cacheHandlers):

            默认情况下onClick会被视为动态绑定,所以每次都回去追踪他的变化

            vue2:默认拥有静态标识(patchflag)

              但是因为是同一个函数,所以没有追踪变化,直接缓存起来复用即可

            vue3:没有静态标识(patchflag)

              静态标识 往文章开头瞅瞅

          - ssr渲染:

            在学了在学了~

                                                                                              收集自 B站李江南 v3教程(下次一定)

  • 相关阅读:
    实验8-1-8 报数 (20分) 浙大版《C语言程序设计实验与习题指导(第3版)》题目集
    6-11 求自定类型元素序列的中位数 (25分)
    L2-032 彩虹瓶 (25分)
    L2-031 深入虎穴 (25分)
    L2-029 特立独行的幸福 (25分)
    L1-064 估值一亿的AI核心代码 (20分) 团体程序设计天梯赛-练习集
    7-16 一元多项式求导 (20 分) 数据结构与算法题目集(中文)
    7-28 搜索树判断 (25 分) 数据结构与算法题目集(中文)
    数据加密之SymmetricAlgorithm加密
    数据加密之RijndaelManaged加密
  • 原文地址:https://www.cnblogs.com/chenghuayike/p/14282524.html
Copyright © 2011-2022 走看看