大家好，我是卡颂。
我是个恋旧的人，Github头像还是上古期间端游仙剑奇侠传的截图。
对于前端，如果能jQuery一把梭，我是很开心的。
React、Vue的遍及让大家习惯了虚构DOM的存在。然而虚构DOM肯定是最优解么？
举个例子，要进行如下DOM挪动操作：
// 变动前abcd// 变动后dabc用jQuery时调用insertBefore把d挪到a后面就行。而React基于虚构DOM的Diff会顺次对abc执行appendChild，将他们顺次挪到最初。
1次DOM操作 vs 3次DOM操作，显然前者更高效。
那么有没有框架能砍掉虚构DOM，间接对DOM节点执行操作，实现全自动jQuery？
有的，这就是最近出的petite-vue。
浏览完本文，你会从原理层面理解该框架，如果你还有精力，能够在此基础上深刻框架源码。
全自动jQuery的实现
能够将原理概括为一句话：
建设状态与更新DOM的办法之间的分割
比方，对于如下DOM：
<p v-show="showName">我是卡颂</p>冀望showName状态的变动能影响p的显隐（通过扭转diaplay）。
理论是建设showName的变动与调用如下办法的分割：
() => { el.style.display = get() ? initialDisplay : 'none'}其中el代表p，get()获取showName以后值。
再比方，对于如下DOM：
<p v-text="name"></p>name扭转后p的textContent会变为对应值。
理论是建设name的变动与调用如下办法的分割：
() => { el.textContent = toDisplayString(get())}所以，整个框架的工作原理跃然纸上：初始化时遍历所有DOM，依据各种v-xx属性建设DOM与操作DOM的办法之间的分割。
当扭转状态后，会主动调用与其无关的操作DOM的办法，几乎就是全自动jQuery。
所以，框架的外围在于：如何建立联系？
一个渣男的故事
这部分源码都收敛在@vue/reactivity库中。我并不想带你精读源码，因为这样很没意思，看了还容易忘。
接下来我会通过一个故事为你展现其工作原理，当你理解原理后如果感兴趣能够本人去看源码。
咱们的指标是形容：状态变动与更新DOM的办法之间的分割。说得再宽泛点，是建设状态与副作用之间的分割。
即：状态变动 -> 执行副作用
对于一段关系，能够从当事单方的角度形容，比方：
男生指着女生说：这是我女朋友。
接着女生指着男生说：这是我男朋友。
你作为旁观者，通过单方的形容就晓得他们处于一段恋爱关系。
推广到状态与副作用，则是：
副作用指着状态说：我依赖这个状态，他变了我就会执行。
状态指着副作用说：我订阅了这个副作用，当我变了后我会告诉他。
能够看到，公布订阅其实是对一段关系站在单方视角的论述
举个例子，如下DOM构造：
<div v-scope="{num: 0}"> <button @click="num++">add 1</button> <p v-show="num%2"> <span v-text="num"></span> </p></div> 通过petite-vue遍历后的关系图：
框架的交互流程为：
- 触发点击事件，状态
num变动 - 告诉其订阅的
副作用（effect1与effect2），执行对应DOM操作
如果从情侣关系角度解读，就是：
num指着effect1说：这是我女朋友。
effect1指着num说：这是我男朋友。
num指着effect2说：这是我女朋友。
effect2指着num说：这是我男朋友。
总结
明天咱们学习了一个框架petite-vue，他的底层实现由多段凌乱的男女关系组成，下层是一个个间接操作DOM的办法。
不晓得看完后你有没有趣味深刻理解下这种关系呢？
感兴趣的话能够看看Vue Mastery的Vue 3 Reactivity课程。