2.1　createApp（）函數(shù)

createApp（）函數(shù)為Vue3的入口函數(shù)，在引入框架后，系統(tǒng)會直接調(diào)用該函數(shù)。它需傳入兩個參數(shù)：第一個參數(shù)為Component（組件），第二個參數(shù)為需綁定的根節(jié)點。Component實現(xiàn)內(nèi)容如下：

在Component組件中有兩種方法：data（）和render（），在data（）方法內(nèi)聲明響應(yīng)式數(shù)據(jù)，在render（）方法內(nèi)返回待渲染為真實DOM結(jié)構(gòu)的VNode，包含div標(biāo)簽、onClick（）方法和this.count值。data（）內(nèi)的count為響應(yīng)式數(shù)據(jù)，當(dāng)單擊div后，count加1，實現(xiàn)數(shù)據(jù)的自動增加。該VNode對應(yīng)的template寫法如下：

     ＜div onClick='()=＞{this.count++}'＞{{this.count}}＜/div＞

createApp（）函數(shù)內(nèi)部將data（）內(nèi)的數(shù)據(jù)轉(zhuǎn)換為響應(yīng)式數(shù)據(jù)，通過監(jiān)聽數(shù)據(jù)變化，執(zhí)行DOM操作，實現(xiàn)數(shù)據(jù)驅(qū)動DOM的目的。在掛載過程中，需聲明一個根節(jié)點作為組件掛載的錨點，掛載渲染完成的組件。

     //此處直接綁定id為app的div節(jié)點作為掛載的根節(jié)點
     createApp(Component,document.getElementById('app'))

createApp（）函數(shù)內(nèi)部需要實現(xiàn)以下步驟：

（1）將數(shù)據(jù)處理為響應(yīng)式數(shù)據(jù)；

（2）執(zhí)行渲染函數(shù)；

（3）完成DOM元素渲染。

根據(jù)上述步驟查看createApp（）函數(shù)的內(nèi)部實現(xiàn)，具體代碼如下：

由圖2.1可知，該函數(shù)內(nèi)部執(zhí)行將對象轉(zhuǎn)換為響應(yīng)式數(shù)據(jù)的方法。通過watchEffect（）（effect副作用函數(shù)）保存待執(zhí)行的函數(shù)，最后通過mount（）函數(shù)將VNode轉(zhuǎn)換為真實的DOM結(jié)構(gòu)，并插入id=app的div根節(jié)點內(nèi)。

注：函數(shù)副作用指函數(shù)內(nèi)部與外部互動。所謂effect副作用函數(shù)，可以理解為函數(shù)被調(diào)用時，內(nèi)部需要產(chǎn)生運算以外的其他結(jié)果，此時調(diào)用副作用函數(shù)執(zhí)行預(yù)設(shè)好的回調(diào)鉤子函數(shù)，觸發(fā)一系列更新等操作來產(chǎn)生其他結(jié)果。