vue2.0架構認識

虛拟dom和聲明式渲染：

Vue的編譯器在編譯模闆之後，會把這些模闆編譯成一個渲染函數 。而函數被調用的時候就會渲染并且傳回一個 虛拟DOM的樹 。

這個樹非常輕量，它的職責就是描述目前界面所應處的狀态。當我們 有了這個虛拟的樹之後，再交給一個patch函數，負責把這些虛拟DOM真正施加到真實的DOM上 。

在這個過程中，Vue有自身的響應式系統來偵測在渲染過程中所依賴到的資料來源。在渲染過程中，偵測到的資料來源之後，之後就可以精确感覺資料源的變動。

到時候就可以根據需要重新進行渲染。當重新進行渲染之後，會生成一個新的樹，将新樹與舊樹進行對比，就可以最終得出應施加到真實DOM上的改動。

Vue是一個資料驅動頁面的一個架構，基于MVVM模式，M指的是資料，V指得是視圖，VM是視圖模型，将資料綁定視圖上。

這個架構着重于VM部分,它以DOM元素為模版，提供資料綁定的功能。一個web app可能會含有多個vue元件。Vuex是基于vue的web app架構。

核心思想都是一樣，把UI結構映射到恰當的元件樹 ↓↓↓↓↓↓↓↓↓↓↓↓↓

父子通訊:

在Vue中，父子元件之間的通信是通過 props 傳遞。

.vue檔案??

Vue的元件引入建構工具之後有一個 單檔案元件概念 ，如

在同一個Vue檔案裡，可以同時寫 template, script 和 style，三個東西放在一個裡面。

同時，Vue的單檔案元件和 Web Components 有一個本質不同，它是基于建構工具實作。

這樣的好處是有了一個建構的機會，可以對這些單檔案元件做更多的分析處，在每一個語言塊裡可以單獨使用不同的處理器

這三個東西是一個單向資料流，State 驅動 View 的渲染，而使用者對 View 進行操作産生 Action，會使State産生變化，進而導緻 View 重新渲染。

state--->view---->Action(再回到state去)

css引入時：scoped

優勢：不同的頁面即使相同的層級、相同的class或者id都不會互相影響。

2、css使用 style的動态樣式表

使用vue的過程中，發現使用的不是平時開發用的 style字尾的檔案，而是類似于less/sass 的動态樣式。

優勢：動态的樣式表，層級更加精确、減少了幾乎所有的層級備援代碼、可以設定樣式變量這樣會減少很多的樣式不統一的錯誤，以及減少代碼量等，這樣大大加快了樣式的開發速度。

vuc-cli

npm run dev

npm run dev：熱重載，在項目腳手架搭建完成之後，運作這個指令行，會開啟代碼做了修改之後，一旦ctrl+s，或者焦點離開IDE，就會局部重新整理頁面。

但是美中不足的是，當動态的資料發生變化後，頁面DOM是沒有重新整理的，隻有手動重新整理頁面DOM資料才會發生變化。當然，在vue已經提供了強大的友善的前提下，這點小瑕疵是我完全可以接受的。

嚴格模式

文法檢查可要可不要（建議開啟代碼規範前期初學者可關閉）

作用域：

通過el定義一個Vue視圖的容器元素，可以傳遞css選擇器，id選擇，類選擇器，元素名稱選擇器等等

頁面中有多個符合條件選擇器，vue隻會捕獲第一個符合條件的選擇器對應的元素選擇器

data：資料綁定實作了将模型到視圖模型的綁定

總結起來：（1） 簡潔 （2） 輕量 （3）快速 （4） 資料驅動 （5） 子產品化 （6） 元件化Vue