Vue 3已正式发布了将近一年。我相信许多朋友在生产环境中使用了VUE 3。在用户级别上。吸引我的观点之一是提高响应绩效：
翻译是，API的阅读效率得到提高，提高了写作效率，提高了依赖效率，并且使用契约的覆盖范围也降低了。
这只是对悬挂天空的优化，因为有必要知道响应系统是vue.js的核心实现之一，并且优化IT的优化意味着优化所有vue.js开发应用程序的性能。
官方VUE官员并未实施这种优化，但它是由社区中的一个大人物提出的。相关优化代码已于2020年10月9日提交。
这次Basvanmeurs提出的响应绩效优化确实使您感到高兴，不仅可以大大提高VUE 3的性能，而且还因为这种核心代码可以来自社区的贡献，这意味着Vue 3变得越来越受到影响注意;一些有能力的开发人员对核心代码的贡献可以使VUE 3变得更加越来越好。
我们知道，与VUE 2相比，VUE 3进行了多次优化，其中之一是从API到API的数据响应的实现。
当Vue 3被提升时，该官员宣布，它是根据响应的表现进行了优化的。那么优化的方面是什么？有些朋友认为API的性能更好，但实际上，在性能方面实际上更糟。有关详细信息，请通过有关ES6代理性能的想法参考本文，我还对此进行了测试。结论得出结论。IBID，您可以参考此回购。
由于它很慢，为什么VUE 3选择它来实现数据响应？因为它本质上是对象的劫持，它不仅可以监视对象对象中的更改，还可以监视该对象的更改，还可以监视该对象的更改对象的属性；并且，因此它只能监视此属性值中的更改，并且不能监视对象属性的新和删除。
实际上，在性能方面的响应优化实际上反映在响应方案中，该方案将更深的嵌套水平转化为响应。在VUE 2的实现中，当在组件初始化期间达到数据时，当子属性仍然是一个对象，对象的定义的响应类型是递归的。当访问属性时，将判断sub -attribute的类型以确定其是否为递归。这实际上是对子对象的响应的延迟定义，并且性能会有所改善。
因此，与VUE 2相比，VUE 3确实在响应迅速实现部分中具有一定的优化，但实际上效果受到限制。Vue.JS 3.2对响应性能的优化这次确实实现了定性的飞跃。接下来，我们将参加一些硬盘，从源代码级别进行了优化，而这些优化的背后进行了回报。在技术级别上进行思考。
SO值的响应是，当我们修改数据时，我们可以自动做某事。组件的渲染是修改数据，该数据可以自动触发组件的渲染。
VUE 3实现了响应，该响应基本上被劫持了通过API的数据对象的读写。当我们访问数据时，它将触发依赖关系集合；修改数据时，将触发分布通知。
接下来，让我们简要分析收集和分布通知的依赖性的实现（在vue.js 3.2之前）。
首先，依赖的过程基于收集过程。核心是在访问响应数据时触发函数，然后执行函数集合依赖性：
在分析该功能的实施之前，我们首先考虑要收集的依赖性。我们的目的是实现响应，也就是说，当数据更改时，它可以自动执行某些操作，例如执行某些功能，因此我们收集的依赖性是收集的依赖性是数据更改后执行的副作用函数。
该函数具有三个参数，代表原始数据；这是指收集的类型；访问的属性。
该函数的功能是作为原始数据对象的外部创建的。它的关键是，价值是依赖性；关键是，该值是一个集合，侧面效应函数的集合存储在集合中。为了促进理解，它们之间的关系可以通过以下图来表示：
因此，每个执行函数都依赖于当前激活的副作用函数，然后在相应的依赖项下收集相关依赖项。
分布通知发生在数据更新阶段。核心是在修改响应数据时触发函数，然后执行函数的函数：
该函数具有三个参数，指示目标的原始对象；更新的类型表示；要修改的属性。
功能主要做四件事：
因此，每个执行函数均基于相关副作用的相同副作用。
在描述依赖收集和分布通知的过程中，我们都提到了一个单词：副作用函数。在依赖关系收集过程中，我们将（当前激活副作用函数）用作依赖收集。这是什么？接下来，让我们看一下Lushan对副作用功能的真实面孔。
因此，什么是副作用函数。在介绍它之前，让我们回顾一下响应迅速的原始需求，也就是说，我们可以自动做一些事情来自动做一些事情，并举一个简单的例子：
我们定义响应对象，然后在中国访问它。我们希望当函数修改值时，我们可以自动执行该函数。
根据我们对因收集过程的先前分析，如果是这样，则可以达到需求，但是显然是不可能的，因为当代码执行到这一行时，它与其自己的操作无关函数。已知。
那应该怎么办？实际上，只要我们运行该函数，只需分配一个值：
遵循这个想法，我们可以使用高端功能的思想来制作一层包装：
这也是一个函数。它接受为参数，返回新功能，然后维护全局变量。执行时，将其设置为然后执行。
这样，当我们执行然后修改它时，将自动执行该函数。
实际上，Vue 3使用了类似的方法。其中有副作用函数。让我们看一下其实施：
基于上述代码，内部执行函数创建了一个新功能。为了与外部功能区分开。
该函数是响应副作用函数。发出执行过程后，将执行。
根据我们以前的分析，该函数只需要做两件事：让全局点与之点，然后执行包装的原始功能。
但是实际上，其实施更加复杂。首先，国家是否将判断的状态实际上是一种控制方法，允许原始功能并直接返回在非州和非策划执行情况下。
然后判断它是否包含（如果不包含），然后按堆栈中。我们之前提到的是，只要您设置它，为什么要在此处设计堆栈结构？
实际上，考虑到以下嵌套场景：
每次执行函数时，如果我们仅将功能分配给函数，则在执行完成后返回的函数。这样，对集合的相应访问不正确。此时，我们目前执行外部执行。修改功能后，执行不是函数，而是函数。最终输出结果如下：
我们期望的结果应该如下：
因此，对于嵌套的场景，我们不能简单地分配一个值。我们应该考虑该函数本身的执行是一种堆栈操作，因此我们也可以设计一个，以便每次输入函数时，然后在执行完成后将其退出堆栈，然后指向最后一个元素，即外部函数对应。
在这里，我们还注意到一个细节，该详细信息可以执行该功能，以清除与该功能相对应的函数。在输入堆栈之前，当执行功能（除了将当前激活收集为依赖项）外，我们还可以通过依靠依赖性来找到相应的函数。该功能的Active Act，然后将其删除。该函数的代码如下：
为什么需要它？如果遇到此场景：
可以知道，该组件的视图将根据变量或随机数的控件显示。当我们单击的按钮时，将修改此变量值。
假设否，当第一个渲染模板时，它是组件的副作用渲染函数。因为在模板期间可以访问它，所以它将执行依赖关系和副作用渲染函数。我们称之为它。然后单击按钮切换到显示随机号码。目前，我们单击按钮。由于已修改，我们将发送通知，查找和执行，然后触发组件的重新施用。
但是这种行为实际上并不达到期望，因为当我们单击按钮时，当视图切换到随机数时，它也会触发组件的重新渲染，但是此时，视图没有呈现，因此其更改不应影响它。
因此，在执行组件之前，如果我们清除依赖项，我们可以删除先前收集的依赖项。这样，当我们修改它时，它不会触发组件的重新填充，因为没有依赖关系，因为哪个依赖关系，与期望一致。
响应实施的原则是先前分析的，一切看起来都还不错，因此在这里还可以优化什么？
目前，需要先执行每个副作用函数的执行，然后在执行副作用函数期间重新收集依赖项。这个过程涉及大量的添加和删除集合的操作。在许多情况下，依赖关系关系很少发生变化，因此这里有一定的优化空间。
为了减少收集和删除的添加，我们需要确定每个依赖性的状态，例如是新收集还是已收集。
因此，在这里您需要在集合中添加两个属性：
这意味着是否已收集并指示它是新收集的。
然后设计一些全球变量，
它表示递归嵌套执行函数的深度；用于识别收集和收集的状态；指示标记最大标记的位数。
接下来，查看他们的申请：
可以看出，该函数的实现已修改并调整为一定数量，内部使用类创建一个实例，而函数返回的点是类的方法。
也就是说，执行副作用功能时，此功能实际上执行。
执行该函数后，我们注意到该函数不再默认执行。在包装函数执行之前，记录首先执行，然后将递归的比较深度超过它。如果不超过（通常不超过），请执行依赖项以查看其实现：
函数实现非常简单，在遍历实例中的属性，标记了每个属性的值。
接下来，将执行该函数，这是副作用函数的函数。例如，对于组件渲染，组件渲染函数。
执行函数后，将访问响应数据，它们将触发它们，然后执行函数以执行依赖关系集合。相应地，收集过程也进行了一些调整：
我们发现，当创建创建时，它是通过执行方法完成的。另外，在依靠主动激活的积极依赖之前，它将确定是否已收集。如果收集到它，则无需再次收集。此外，它将判断这是否是新的依赖。如果不是，它将标记为新。
接下来，让我们看一下执行后的逻辑：
在满足依赖项的条件下，您需要执行依赖项的完成才能查看其实施：
最主要的是找到已收集的依赖项，但尚未收集新的依赖性。这实际上是为了求解早期所需的场景：在新组件渲染过程中未访问的响应对象，然后更改不应触发组件的重新施用。
以上是依赖项的优化。可以看出，与每个执行函数之前的每个执行函数相比，首先需要依赖性过程，然后添加依赖项。在该过程中，收集的依赖性不会重复收集，并且执行函数将删除已收集但尚未在新的依赖项中收集的依赖项。
优化后，降低了依赖集的操作，并自然优化了性能。
响应API的优化主要反映在API的优化中。
以API为例，在优化之前查看实现：
该函数返回函数执行的返回值，并在内部首先处理嵌套情况。如果它通过了，则将直接返回；然后返回对象的实例。
内部实现主要是其实例属性的总和。
当访问对象的属性时，它将触发依赖关系收集的执行函数，然后返回其值；修改对象的值时，它将触发新值的设置并执行函数分布通知。如果新值是对象或数组类型，则将其转换为对象。
接下来，让我们看一下vue.js 3.2，以实现对此部分的相关更改：
主要变化部分是对象属性的依赖收集和分布通知的逻辑。
在实施vue.js 3.2时，依赖收集零件从原始函数更改为查看其实现：
您可以在此处看到直接保存在属性中的相关依赖项，并且在函数的实现中，依赖项将保留到全局：
显然，该功能内部可能需要进行多个判断和设置逻辑，并且依赖对象的属性保存到本系列判断和设置以优化性能。
相应地，分布通知零件的实现从原始函数更改为实现其实现：
因为它是从属性中直接获得的，所以它具有所有依赖性和经历的执行，并且不需要执行该功能的其他逻辑，因此性能也得到了改进。
专注于您可能会发现标签依赖项用于在每个计算时使用左运动操作员；分配时，使用或计算：
那么，为什么要这样设计它？因为执行可能是递归，以这种方式，可以记录每个级别的依赖项。
在判断是否已收集某些依赖项时，使用该功能：
通过判断操作的结果是否大于判断的结果，这要求在收集时依赖于它的层次结构。是在第一层上执行的，但目前已经执行了第二层嵌套的功能。然后函数返回值表示需要收集此依赖项。显然，此需求是合理的。
可以看出，如果没有操作设计，您很难处理不同的嵌套级别依赖项。该设计还反映了BasvanMeurs非常坚实的计算机基本技能。
通常，在vue.js的应用中，响应数据的访问和修改非常频繁地操作。因此，此过程的性能优化将大大提高整个应用程序的性能。
大多数人去看到vue.js响应的实施。目的最多可能是了解实现的原则，并且很少关注它是否是最好的。BasvanMeurs可以提出实施这一系列优化的实施，并编写基准工具来验证我们的优化，这值得我们学习。
我希望在阅读本文之后，除了连续连续连续连续连续连续连续连续连续连续连续连续连续连续连续连续连续连续连续连续连续连续连续连续连续连续连续连续连续连续连续连续连续连续连续连续连续三次阅读本文，您还可以查看本文之后，您还可以查看原始帖子并查看他们的讨论之后，您还可以连续连续连续连续连续三次，除了阅读本文之外，我也希望，我希望他们还可以查看原始帖子，除了阅读本文之后，我希望，我希望他们还可以查看原始帖子，除了阅读本文之后，我也希望，我希望他们还可以查看原始帖子，除了阅读本文之后，我也希望，我希望他们还可以查看原始帖子，除了阅读本文之后，我还希望，我希望在阅读本文之后。我相信您会收获更多。
前端性能优化始终是一个值得更深入的方向。我希望在未来的开发中，无论是编写框架还是企业，您都可以考虑可能存在的优化点。
作者：黄YI