先介紹下Vue，它是一套用於構建使用者介面的漸進式框架。與其他大型框架不同的是Vue被設計為可以自底向上逐層應用。Vue的核心庫只關注檢視層，不僅易於上手，還方便與第三方庫或既有專案整合。另一方面當與現代化的工具鏈以及各種支援類庫結合使用時，Vue也完全能夠為複雜的單頁應用提供驅動。

Vue構建方式

有兩種構建方式，獨立構建和執行構建。他們的區別在於前者包含模板編譯器而後者不包含。

模板編譯器的職責是將模板字串編譯為純JacaScript的渲染函式。如果你想要在元件中使用template選項，你就需要編譯器。

宣告週期

具體要注意的是created和mounted區別，created是vm例項已建立但為掛載，因此一些DOM操作應該放在mounted中。非同步請求放在created或者mounted暫時沒有發現什麼區別。

計算（computed）屬性

模板內的表示式不應該包含太多的邏輯，對於任何複雜邏輯，都應當使用計算屬性，

Component屬性和methods不同的是計算屬性是基於他們的依賴進行快取的。

Component屬性和mounted屬性，通常更好的想法是使用computed屬性而不是命令式watch回撥。雖然計算屬性在大多數情況下更合適，但有時需要一個自定義的watcher。當你想要在市局變化響應時，執行非同步操作或開銷較大的操作，這是很有用的。

物件更新

可以用新物件替換舊物件，或者使用Vue。Set方法

Vue.set(vm.somObject,'foo','bar')

this.someObject=Object.assign({},this.someObject,{a:1,b:2})

表單控制元件繫結

用v-model指定在表單控制元件元素上建立雙向資料繫結。

元件

Vue元件的API來自三部分：props,events和slots：

Props允許外部環境傳遞資料給元件

Events允許元件觸發外部環境的副作用

Slots允許外部環境將額外的內容組合在元件中。

元件的data屬性必須是函式

父子組價

在Vue.js中父子元件的關係可以總結為props down，ecents up。父元件通過props向下傳遞資料給子元件，子元件通過events給父元件傳送訊息。

prop是單向繫結的：當父元件的屬性變化時，將傳導給子元件，但是不會反過來。這是為了防止子元件無意修改了父元件的狀態——這會讓應用的資料流難以理解。

另外，每次父元件更新時，子元件的所有prop都會更新為最新值。這意味著你不應該在子元件內部改變prop。如果你這麼做了，Vue會在控制檯給出警告。

為什麼我們會有修改prop中資料的衝動呢？通常是這兩種原因：

1.prop作為初始值傳入後，子元件想把它當作區域性資料來用；

2.prop作為初始值傳入，由子元件處理成其它資料輸出。

對這兩種原因，正確的應對方式是：

1.定義一個區域性變數，並用prop的值初始化它：

props: ['initialCounter'],

data: function () {

return { counter: this.initialCounter }

}

2.定義一個計算屬性，處理prop的值並返回。

props: ['size'],computed: {

normalizedSize: function () {

return this.size.trim().toLowerCase()

}

}

注意在JavaScript中物件和陣列是引用型別，指向同一個記憶體空間，如果prop是一個物件或陣列，在子元件內部改變它會影響父元件的狀態。

3）非父子元件

有時候兩個元件也需要通訊(非父子關係)。在簡單的場景下，可以使用一個空的Vue例項作為中央事件匯流排。在複雜的情況下，我們應該考慮使用專門的狀態管理模式。

4）.sync修飾符

在一些情況下，我們可能會需要對一個prop進行『雙向繫結』。

2.0中移除了.sync，Vue2.3.0+又將其添加回來了，但是這次它只是作為一個編譯時的語法糖存在，它會被擴充套件為一個自動更新父元件屬性的v-on偵聽器。如下程式碼

<comp :foo.sync="bar"></comp>

會被擴充套件為：

<comp :foo="bar" @update:foo="val => bar = val"></comp>

當子元件需要更新foo的值時，它需要顯式地觸發一個更新事件：

this.$emit('update:foo', newValue)

5）使用slot進行內容分發

作用域插槽：接收從子元件中傳遞的prop物件。作用域插槽更具代表性的用例是列表元件，允許元件自定義應該如何渲染列表每一項

6）動態元件、is特性和keep-alive指令

7）子元件索引

儘管有props和events，但是有時仍然需要JavaScript中直接訪問子元件。為此可以使用ref為子元件指定一個索引ID。

非同步更新佇列

雖然 Vue.js 通常鼓勵開發人員沿著"資料驅動"的方式思考，避免直接接觸 DOM，但是有時我們確實要這麼做。為了在資料變化之後等待 Vue 完成更新 DOM ，可以在資料變化之後立即使用 Vue.nextTick(callback) 。這樣回撥函式在 DOM 更新完成後就會呼叫。