av激情亚洲男人的天堂国语,日韩欧美精品一中文字幕,无码av一区二区三区无码,国产又色又爽又刺激的a片,国产又色又爽又刺激的a片

大概幾集下飯劇時間就能懂的Vue3原理

大概幾集下飯劇時間就能懂的VUE3原理

大家好，我是卡頌。

最近中午沒胃口，找來VUE源碼相關視頻來當下飯劇。幾頓飯下去，人胖了，VUE也整明白了。

這篇文章為你帶來一份VUE3原理速成指南。

模塊劃分

如果我們用「VUE的模版語法」定義：

 
 
 
 
    
  
  
  
  
  1. hello
     
    2.

最終VUE會幫我們在瀏覽器中渲染對應的DOM節(jié)點。

這之間對這段節(jié)點的描述會經歷4次變化，橫跨「編譯時」與「運行時」：

「模版語法」在編譯時會被「編譯器」轉化為「render函數」，類似：

 
 
 
 
    
  
  
  
  
  1. render(h) { 
    2. 
  
  
  
  
  2.   return h('div', 'hello'); 
    3. 
  
  
  
  
  3. } 
    4.

在運行時，「render函數」執(zhí)行后返回的「h函數的執(zhí)行結果」就是VNode(也就是虛擬DOM)，類似：

 
 
 
 
    
  
  
  
  
  1. { 
    2. 
  
  
  
  
  2.   tag: "div", 
    3. 
  
  
  
  
  3.   children: [ 
    4. 
  
  
  
  
  4.     { 
    5. 
  
  
  
  
  5.       text: "Hello" 
    6. 
  
  
  
  
  6.     } 
    7. 
  
  
  
  
  7.   ] 
    8. 
  
  
  
  
  8. } 
    9.

最終，VUE根據VNode的信息，在瀏覽器渲染對應DOM。

那么，是誰在驅動這一流程?

mount和patch

組件有兩種不同的渲染邏輯：「首次渲染」和「更新」。

「首次渲染」意味著從無到有，比如上文的VNode：

 
 
 
 
    
  
  
  
  
  1. { 
    2. 
  
  
  
  
  2.   tag: "div", 
    3. 
  
  
  
  
  3.   children: [ 
    4. 
  
  
  
  
  4.     { 
    5. 
  
  
  
  
  5.       text: "Hello" 
    6. 
  
  
  
  
  6.     } 
    7. 
  
  
  
  
  7.   ] 
    8. 
  
  
  
  
  8. } 
    9.

可能對應如下DOM操作：

 
 
 
 
    
  
  
  
  
  1. const node = document.createElement(VNode.tag); 
    2. 
  
  
  
  
  2. node.textConent = 'Hello'; 
    3. 
  
  
  
  
  3. contanerDOM.appendChild(node); 
    4.

「更新」則需要對比更新前后VNode，對變化部分執(zhí)行DOM操作。

比如，以上VNode如果變?yōu)椋?/p>

 
 
 
 
    
  
  
  
  
  1. { 
    2. 
  
  
  
  
  2.   tag: "div", 
    3. 
  
  
  
  
  3.   children: [ 
    4. 
  
  
  
  
  4.     { 
    5. 
  
  
  
  
  5.       // text改變 
    6. 
  
  
  
  
  6.       text: "world" 
    7. 
  
  
  
  
  7.     } 
    8. 
  
  
  
  
  8.   ] 
    9. 
  
  
  
  
  9. } 
    10.

則最終執(zhí)行：

 
 
 
 
    
  
  
  
  
  1. node.textContent = 'world'; 
    2.

VUE的「首次渲染」對應mount模塊，「更新」對應patch模塊。

所以，render函數執(zhí)行后返回VNode，根據情況不同，會走mount或patch的渲染邏輯：

如果想深入虛擬DOM相關知識，推薦閱讀snabbdom[1]源碼。這是個優(yōu)秀的虛擬DOM庫，VUE2的虛擬DOM部分就是fork這個庫改造的。

那么是誰在什么時機調用了render函數呢?

響應式更新

在VUE中，狀態(tài)變化會實時反映到視圖上，比如：

 
 
 
 
    
  
  
  
  
  1. {{count}}
 

點擊div后：

  1. 觸發(fā)點擊事件，count變化
  2. count變化觸發(fā)回調，回調中更新視圖

當前我們已經知道第二步是由于觸發(fā)了如下流程：

所以只需要建立count變化到執(zhí)行render函數的聯系即可。

具體來說，我們希望實現reactive及watchEffect：

 
 
 
 
    
  
  
  
  
  1. // 定義狀態(tài) 
    2. 
  
  
  
  
  2. const state = reactive({count: 0}); 
    3. 
  
  
  
  
  3.  
    4. 
  
  
  
  
  4. // 監(jiān)聽狀態(tài)變化 
    5. 
  
  
  
  
  5. watchEffect(() => { 
    6. 
  
  
  
  
  6.   console.log(state.count); 
    7. 
  
  
  
  
  7. }) 
    8. 
  
  
  
  
  8.  
    9. 
  
  
  
  
  9. // 改變狀態(tài) 
    10. 
  
  
  
  
  10. state.count++; 
    11.

reactive定義狀態(tài)。

watchEffect根據回調執(zhí)行的情況決定監(jiān)聽哪些狀態(tài)。

比如watchEffect回調執(zhí)行了console.log(state.count);，他就會監(jiān)聽state的變化。

當執(zhí)行state.count++;，由于watchEffect監(jiān)聽了state的變化，則其回調會觸發(fā)，打印state.count。

這就是Reactivity模塊。

VUE官方推出了VUE3響應式原理[2]課程講解Reactivity的實現，這是B站鏈接。如果經濟允許，請支持正版[3]

當實現了Reactivity模塊，我們就能將「組件狀態(tài)」與后續(xù)流程串聯起來。

剛才講過，render函數是編譯器根據「模版語法」生成的。在面對帶狀態(tài)的模版語法時，比如上文的count：

 
 
 
 
    
  
  
  
  
  1. {{count}}
 

render函數內的count是響應式的(即：count實際是reactive({count: 0}))。

那么就能用watchEffect監(jiān)聽count的變化。

所以，在應用初始化時，會有類似邏輯：

 
 
 
 
    
  
  
  
  
  1. let isMounted = false; 
    2. 
  
  
  
  
  2. let oldVNode; 
    3. 
  
  
  
  
  3. watchEffect(() => { 
    4. 
  
  
  
  
  4.   if (!isMounted) { 
    5. 
  
  
  
  
  5.     // mount邏輯 
    6. 
  
  
  
  
  6.     // 調用render函數 
    7. 
  
  
  
  
  7.     oldVNode = component.render(); 
    8. 
  
  
  
  
  8.     // mount 
    9. 
  
  
  
  
  9.     mount(oldVNode); 
    10. 
  
  
  
  
  10.   } else { 
    11. 
  
  
  
  
  11.     // patch邏輯 
    12. 
  
  
  
  
  12.     // 調用render函數 
    13. 
  
  
  
  
  13.     newVNode = component.render(); 
    14. 
  
  
  
  
  14.     patch(oldVNode, newVNode); 
    15. 
  
  
  
  
  15.     oldVNode = newVNode; 
    16. 
  
  
  
  
  16.   } 
    17. 
  
  
  
  
  17. }) 
    18.

其中component.render()(render函數的執(zhí)行)達到上文「監(jiān)聽狀態(tài)變化」的效果：

 
 
 
 
    
  
  
  
  
  1. // 監(jiān)聽狀態(tài)變化 
    2. 
  
  
  
  
  2. watchEffect(() => { 
    3. 
  
  
  
  
  3.   console.log(state.count); 
    4. 
  
  
  
  
  4. }) 
    5.

所以，該組件內任何狀態(tài)變化都會觸發(fā)watchEffect的執(zhí)行，watchEffect回調內會觸發(fā)后續(xù)流程。

總結

VUE3按原理大體可以劃分為：

  • mount
  • patch
  • 編譯器
  • Reactivity

VUE官方推出了實現簡易VUE3教程[4]，感興趣的朋友可以去看看。如果有能力，記得去支持正版[5]哦。

參考資料

[1]snabbdom:

https://github.com/snabbdom/snabbdom

[2]VUE3響應式原理:

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


分享題目：大概幾集下飯劇時間就能懂的Vue3原理
標題來源：http://uogjgqi.cn/article/cogjhcd.html
掃二維碼與項目經理溝通

我們在微信上24小時期待你的聲音

解答本文疑問/技術咨詢/運營咨詢/技術建議/互聯網交流