大概看几集剧就能看懂的Vue3原理

时间：2023-03-15 14:06:02 科技观察

看几集剧就能看懂的VUE3原理大家好，我是Kason。最近中午没什么胃口，就找了一个VUE源码相关的视频来呈现一个饭剧。人吃几顿饭就长胖，VUE也明白。本文为大家带来VUE3原理快速指南。模块划分如果我们使用“VUE的模板语法”来定义：

hello

最后，VUE会帮我们在浏览器中渲染对应的DOM节点。这个节点的描述会发生4次变化，跨越“编译时”和“运行时”：“模板语法”会在编译时被“编译器”转换为“渲染函数”，类似于：render(h){returnh('div','hello');}在运行时，“render函数”执行后返回的“h函数执行结果”为VNode（即虚拟DOM），类似于：{tag:"div",children:[{text:"Hello"}]}最后VUE根据VNode的信息在浏览器中渲染对应的DOM。那么，是谁在推动这个过程？mount和patch组件有两种不同的渲染逻辑：“首次渲染”和“更新”。“第一次渲染”的意思是从头开始，比如上面的VNode:{tag:"div",children:[{text:"Hello"}]}可能对应如下DOM操作：constnode=document.createElement(VNode.tag);node.textConent='Hello';contanerDOM.appendChild(node);“更新”需要比较更新前后的VNode，对变化的部分进行DOM操作。比如上面的VNode变成：{tag:"div",children:[{//textchangestext:"world"}]}，那么最后执行：node.textContent='world';VUE的“首次渲染”对应挂载模块，“更新”对应补丁模块。因此，render函数执行完毕后，返回到VNode。根据不同的情况，会使用mount或者patch的渲染逻辑：如果想深入了解虚拟DOM，推荐阅读snabbdom[1]的源码。这是一个优秀的虚拟DOM库。VUE2的虚拟DOM部分由fork库改造而来。那么谁在什么时候调用了render函数呢？响应式更新在VUE中，状态变化会实时反映到视图中，例如：{{count}}

点击div后：触发点击事件，计数change触发回调，视图在回调中更新。现在我们已经知道第二步是因为触发了下面的流程：所以我们只需要建立count变化和render函数执行之间的联系即可。具体的，我们希望实现reactive和watchEffect：//Definestateconststate=reactive({count:0});//监听状态变化watchEffect(()=>{console.log(state.count);})//改变状态state.count++;反应定义状态。watchEffect根据回调的执行情况来决定监听哪些状态。例如，如果watchEffect回调执行console.log(state.count);，它将监视状态变化。当state.count++;被执行时，由于watchEffect监听状态变化，它的回调将被触发并打印state.count。这是反应模块。VUE官方推出VUE3ResponsivePrinciples[2]课程讲解Reactivity的实现，这是B站链接，如果经济允许，请支持原文[3]Reactivity模块实现时，我们可以连接《组件状态”与后续过程。如前所述，render函数是由编译器根据“模板语法”生成的。面对带有state的模板语法，比如上面的count:{{count}}

render函数中的count是responsive的（即count其实是reactive的（{计数：0}））。然后就可以使用watchEffect来监听count的变化了。所以在应用初始化的时候，会有类似的逻辑：letisMounted=false;letoldVNode;watchEffect(()=>{if(!isMounted){//挂载逻辑//调用render函数oldVNode=component.render();//mountmount(oldVNode);}else{//补丁逻辑//调用渲染函数newVNode=component.render();patch(oldVNode,newVNode);oldVNode=newVNode;}})wherecomponent.render()(render函数的执行）达到上面“监听状态变化”的效果：//监听状态变化watchEffect(()=>{console.log(state.count);})因此，这个组件的任何状态变化都会触发watchEffect的执行，watchEffect的后续流程会在回调内触发。综上所述，VUE3按照原理大致可以分为以下几类：挂载补丁编译器ReactivityVUE官方推出了一个简单的VUE3教程[4]，有兴趣的朋友可以去看看。有能力的记得支持一下原作[5]。References[1]snabbdom:https://github.com/snabbdom/snabbdom[2]VUE3responsiveprinciple:https://www.bilibili.com/video/BV1SZ4y1x7a9/?spm_id_from=333.788.b_7265636f5f6c697374.6[3]正版:https://www.vuemastery.com/free-weekend/?gclid=Cj0KCQjwpreJBhDvARIsAF1_BU16x7gElbhGqGzZZ1geo5RzOqz_PuaJzBM41jHcAAC6CPwPSPvo8G8aAkdhEALw_wcB[4]实现简易VUE3教程:https://www.bilibili.com/video/BV1rC4y187Vw?p=10[5]正版:https://www.vuemastery.com/free-weekend/?gclid=Cj0KCQjwpreJBhDvARIsAF1_BU16x7gElbhGqGzZZ1geo5RzOqz_PuaJzBM41jHcAAC6CPwPSPvo8G8aAkdhEALw_wcB