全自动jQuery与无情男的故事
大家好，我是Kason。我是一个怀旧的人，Github头像还是古代端游仙剑奇侠传的截图。对于前端，如果能用jQuery我会很高兴。React和Vue的流行已经让大家习惯了虚拟DOM的存在。但是虚拟DOM一定是最优解吗？例如，需要执行如下DOM移动操作：//beforethechangeabcd//afterchangedabc在使用jQuery将d移动到a的前面时调用了insertBefore。React基于虚拟DOM的Diff会依次在abc上执行appendChild，将它们依次移动到末尾。1个DOM操作vs3个DOM操作，显然前者效率更高。那么有没有一种框架可以切断虚拟DOM，直接对DOM节点进行操作，实现全自动jQuery呢？是的，这就是最近发布的petite-vue。阅读本文后，您将从原理层面了解该框架。如果你还有精力，可以在此基础上深入框架的源码。全自动jQuery的实现可以用一句话概括原理：建立状态与更新DOM的方法之间的联系。例如，对于以下DOM：IamKason
expectshowName状态变化会影响p的可见性（通过改变显示）。其实就是建立showName的变化和下面方法的调用之间的联系：()=>{el.style.display=get()?initialDisplay:'none'}其中el代表p，get()获取showName的当前值。再比如，对于下面的DOM：
name改变后，p的textContent会变成对应的值。其实就是建立名称的改变和下面方法的调用之间的联系：()=>{el.textContent=toDisplayString(get())}因此，整个框架的工作原理就准备好了出来：初始化时遍历所有DOM，根据各种v-xx属性建立DOM和操作DOM的方法之间的联系。当状态发生变化时，会自动调用相关的DOM操作方法，简直就是全自动jQuery。那么，框架的核心就是：如何建立连接？@vue/reactivity库中包含这部分无情男故事的源代码。我不想带你去精读源码，因为很枯燥，而且看完后很容易忘记。接下来，我将通过一个故事向大家展示它的工作原理。明白原理后，有兴趣的可以自己去看源码。我们的目标是描述：状态变化和更新DOM的方法之间的联系。更广泛地说，就是建立状态和副作用之间的联系。即：statechange->executionsideeffects对于一段关系，可以从双方的角度来描述，比如：男生指着女生说：这是我女朋友。然后女孩指着男孩说：这是我男朋友。作为旁观者，从双方的描述中就知道，他们是在谈恋爱。引申到state和sideeffects，就是：sideeffect指向state说：我依赖这个state，它有变化我就去执行。state指着sideeffect说：我订阅这个sideeffect，我改了会通知他。可以看出，发布和订阅其实是从双方的角度来解释一种关系。例如，下面的DOM结构：add1 petite-vue遍历后关系图：framework交互过程如下：触发点击事件，状态num改变通知其订阅副作用（effect1和effect2），并执行相应的DOM操作。如果从情侣关系的角度来解释就是：num指向effect1说：这是我女朋友。effect1指着num说：这是我男朋友。num指着effect2说：这是我女朋友。effect2指着num说：这是我男朋友。总结今天我们学习了一个框架petite-vue。其底层实现由多种乱七八糟的男女关系组成，上层是直接操作DOM的方法。不知道大家看完有没有兴趣进一步了解这段关系呢？如果您有兴趣，请查看VueMastery的Vue3Reactivity课程。
