2. Vue 基本工作原理

2.1 Virtual DOM

1. 概念：
   • DOM: DOM以內(nèi)存中樹狀數(shù)據(jù)結(jié)構(gòu)的形式，代表了網(wǎng)頁上的HTML（或XML）文檔內(nèi)容。它充當(dāng)了一個編程接口，將網(wǎng)頁與實(shí)際的編程代碼（如JavaScript）連接起來。
   • Virtual DOM 是瀏覽器中實(shí)際 DOM 的內(nèi)存虛擬副本，但它更輕量且具有額外的功能。
2. Virtual DOM 工作原理：
   通過用戶界面交互，用戶向Vue傳達(dá)了他們希望元素達(dá)到的狀態(tài)；隨后，Vue觸發(fā)虛擬DOM更新該元素所代表的對象（節(jié)點(diǎn)）至期望形態(tài)，同時(shí)記錄這些變更。最終，Vue與實(shí)際DOM進(jìn)行通信，并據(jù)此對發(fā)生變化的節(jié)點(diǎn)執(zhí)行精確更新。
   
   5.Virtrual DOM vs DOM:
   • DOM 是瀏覽器解析 HTML 后生成的樹形結(jié)構(gòu)，節(jié)點(diǎn)是復(fù)雜的對象，直接操作性能開銷較大。
   • Virtual DOM 是DOM 的輕量級副本，用簡單的 JavaScript 對象表示，便于高效計(jì)算和更新。

2.2 Options API

1. 概念： 組件的配置是一個包含所有組件初始配置選項(xiàng)的對象。我們將此參數(shù)的結(jié)構(gòu)稱為Options API。
2. vue2: 實(shí)例化

import { Vue } from 'vue'
const App = { //component's options }
const app = new Vue(App)
app.mount('#app')

3. vue3 實(shí)例化

import { createApp } from 'vue'
const App = { //component's options }
const app=createApp(App)
app.mount('#app')

接下來主要基于vue3 語法

2.3 模板語法

1. 在 Options API中，template接受一個包含有效基于HTML代碼的單一字符串，該字符串代表了組件的用戶界面布局。Vue引擎會解析這一值并將其編譯為優(yōu)化的JavaScript代碼，隨后相應(yīng)地渲染出相關(guān)的DOM元素。
2. 對于多層次的HTML模板代碼，我們可以使用反引號字符（JavaScript模板字面量），以`符號表示，并保持代碼的可讀性。

import { createApp } from 'vue' 
const App = { template: ` <h1>This is the app's entrance</h1> <h2>We are exploring template syntax</h2> `,
}
const app = createApp(App) 
app.mount('#app')

2.4 Vue 響應(yīng)數(shù)據(jù)工作原理：

1. data() 是一個返回表示組件本地?cái)?shù)據(jù)狀態(tài)的匿名函數(shù)。我們稱這個返回的對象為數(shù)據(jù)對象。在初始化組件實(shí)例時(shí)，Vue引擎會將這個數(shù)據(jù)對象的每個屬性添加到其響應(yīng)式系統(tǒng)中，以便跟蹤其變化并根據(jù)需要觸發(fā)UI模板的重新渲染。
2. 工作原理：
   

（1）一旦定義了本地?cái)?shù)據(jù)，在Vue.js 2.0中，內(nèi)部的Vue引擎會使用JavaScript內(nèi)置的Object.defineProperty()為每個相關(guān)數(shù)據(jù)建立getter和setter，并啟用相關(guān)的數(shù)據(jù)響應(yīng)性。然而，在Vue.js 3.0中，Vue引擎采用了基于ES5 Proxy的機(jī)制以提升性能，使運(yùn)行時(shí)性能翻倍并將所需內(nèi)存減半。

（2）在建立了響應(yīng)性機(jī)制之后，Vue引擎使用觀察者（watcher）對象來跟蹤由setter觸發(fā)的任何數(shù)據(jù)更新。觀察者幫助Vue引擎檢測變化，并通過隊(duì)列系統(tǒng)更新虛擬DOM和實(shí)際DOM。

（3）Vue使用隊(duì)列系統(tǒng)來避免在短時(shí)間內(nèi)對DOM進(jìn)行低效的多次更新。當(dāng)相關(guān)組件的數(shù)據(jù)發(fā)生變化時(shí)，觀察者會將自己添加到隊(duì)列中。Vue引擎按照特定順序?qū)ζ溥M(jìn)行排序以供消費(fèi)。在Vue引擎完成消費(fèi)并將該觀察者從隊(duì)列中清除之前，無論數(shù)據(jù)發(fā)生多少次變化，隊(duì)列中只存在同一組件的一個觀察者。

這一消費(fèi)過程是通過nextTick() API完成的，它是Vue的一個函數(shù)。

（4）最后，在Vue引擎消費(fèi)并清除所有觀察者之后，它會觸發(fā)每個觀察者的run()函數(shù)，自動更新組件的實(shí)際DOM和虛擬DOM，應(yīng)用程序隨即進(jìn)行渲染。