与其他渲染框架相比，两种绑定一直是Vue.Watch API的独特优势，作为用户触发用户响应的方法，为用户提供了解决业务的强大武器。从VUE2到VUE3的手表，并从中学习相应的知识。
在VUE 2中，手表作为组件的对象属性存在。我们可以将数据，prop或存储值用于手表中的密钥，然后在值更改后定义回调函数。如下：
但是我们将在实际发展中遇到一些问题。
第一个数据初始化不会触发此问题的手表。VUE为我们提供了立即配置。通过配置，我们可以强迫VUE在第一次渲染时触发回音后呼叫。
多次修改监视价值，只有一次只会触发官方问题的官方答案，但并非所有问题都可以找到官方答案。
我希望可以通过监视NUM并使用计数进行记录来修改多少次。在示例中，我在创建的生命周期中对NUM进行了3个更改。这次，我希望控制台输出的结果应为3.，但导出实际上是1。
这意味着手表的功能仅触发一次，所以这是为什么呢？
我们都知道，Vue的最大卖点是两条绑定。定义手表的最大作用是帮助我们“监视”数据并在数据更改时触发回调。在同一时间，我们也知道VUE中DOM的更新渲染是异步的。在同一事件周期中，VUE最终将使用数据数据刷新DOM。这一优势是它可以大大降低DOM的渲染成本。
从这个角度来看，我们可以猜测手表也可以使用相同的机制。可以通过源代码找到手表的触发器与数据侦听的数据相同，而数据与DEP相关的观察者都存在。更新是触发的，执行了QueueWatcher函数。以下是此功能的源代码：
因此，我们知道NextTick优化在某种程度上限制了手表的呼吁。
尽管Vue 3的数据监视基础机制使用代理并进行了许多新的优化，但与VUE2相同的是，Vue 3的手表基本上是基于数据响应机制实现的。也有我们在上面讨论的问题，但是该解决方案是在VUE3中正式提供的3。在VUE3中添加了一些配置：
根据文档，只要我们将配置齐平设置为同步，我们就可以实现所需的结果。
据信，眼睛能力良好的朋友还在QueueWatcher源代码中发现了异步配置。从代码中，它似乎也可以实现VUE3冲洗的效果。
但是不幸的是，这种配置已在VUE2的官方文档中删除，官员认为它将影响渲染的性能。
放弃的最大原因是这是一种全局配置。一旦配置了整个项目，观察者的触发器就会受到影响，因此它不可避免地会影响渲染成本。商业。
实际上，在VUE3的官方文档中也提到了它。尽管该官员提供了冲洗配置，但他们不希望用户经常使用它。在VUE Framework系统中，NextTick实际上将是一个更好的选择。
NextTick是VUE事件周期中的关键功能。无论是用户定义的用户还是框架生命周期的默认回调，都将在下一个中调用。在向用户揭示NextTick时，VUE实际上意味着VUE事件周期的自由度已暴露于用户。在上面的示例中，我们实际上可以通过NextTick实现所需的结果。
从框架的角度来看，NextTick将是一个更好的选择，因为用户可以决定是否使用同步方法来触发业务中的回调。在同一时间，它不会破坏框架的操作机制，保持稳定性事件周期机制，并避免出乎意料的问题。
今天，我们从业务示例开始以了解Vue的手表的逻辑。我简要审查了Vue2的开发和变化，以及对业务示例的解决方案。我一直认为，考虑实际业务问题的工具或框架是一种很好的学习方式。因为在此过程中，我们不仅可以逐步解决我们的问题。在同一时间，您可以在处理这些问题时看到其他人的概念，并希望从中学习。我希望在这里见，您还可以获得一些东西并共同努力。
如果您认为本文对您有所帮助，那么您可以喜欢我?
原始：https：//juejin.cn/post/7095271649573863437