一、選項 / 資料

1.data

　　當一個元件被定義，data 必須宣告為返回一個初始資料物件的函式，因為元件可能被用來建立多個例項，如果 data 仍然是一個純碎的物件，則所有的例項將被共享引用同一個資料物件。通過提供 data 函式，每次建立一個新例項後，我們能夠呼叫 data 函式，從而返回初始資料的一個全新副本資料物件。

2.props

　　props 可以是陣列或者物件，用於接收來自父元件的資料。props 中使用物件可以配置高階選項，型別檢測，自定義驗證，設定預設值

　　可以使用以下選項

　　　　type：可以是原生建構函式中的一種：String、Number、Boolean、Array、Object、Date、Function、Symbol、任何自定義建構函式，或上述內容組成的陣列。會檢查一個 prop 是否是給定的型別，否則丟擲警告。

　　　　default：為 prop 指定一個預設值。如果該 prop 沒有被傳入，則換做用這個值。物件或陣列的預設值必須從一個工廠函式返回

　　　　required：Boolean　　定義該 prop 是否是必填項

　　　　validator：function　　自定義驗證函式會將該 prop 的值作為唯一的引數帶入。返回 false 就給預設值，控制檯有警告

　　props: {
　　　　// 檢測型別
　　　　height: Number,
　　　　// 檢測型別 + 其他驗證
　　　　age: {
　　　　　　type: Number,
　　　　　　default: 0,
　　　　　　required: true,
　　　　　　validator: function (value) {
　　　　　　　　return value >= 0
　　　　　　}
　　　　}
　　}

3.propsData

　　只用於 new 建立的例項中，建立例項時傳遞 props，主要作用時方便測試（開發的過程中基本用不到）

4.computed  計算屬性

　　計算屬性將被混入到 Vue 例項中，所有 geter 和 setter 的 this 上下文自動地繫結為 Vue 例項

　　注意如果你為一個計算屬性使用了箭頭函式，則 this 不會指向這個元件的例項，不過你仍然可以將其例項作為函式的第一個引數來訪問。

　　計算屬性的結果會被快取，除非依賴的響應式 property 變化才會重新計算。注意，如果某個依賴（必須非響應式 property）在該例項範疇之外，則計算屬性是不會被更新的。　

　　<p>a + b 的結果是：{{ count }}</p>

　　computed: {

　　　　count(){

　　　　　　return this.a + this.b
　　　　}
　　}

　　計算屬性 vs 方法

　　<p>a + b 的結果是：{{ count() }}</p>

　　methods: {
　　　　count(){
　　　　　　return this.a + this.b
　　　　}
　　}

　　我們可以將同一函式定義為一個方法而不是一個計算屬性，兩種方式的最終結果確實是完全相同的。不同的是計算屬性是基於他們的響應式依賴進行快取的。只在相應響應式依賴發生改變時他們才會重新計算求值。就是說只要 a 或者 b 還沒有發生改變，多次訪問 count 計算屬性會立即返回之前的計算結果，而不必再次執行函式。

　　相比之下，每當觸發重新渲染時，呼叫方法將總會再次執行函式，

　　我們為什麼需要快取?　假設我們有一個性能開銷比較大的計算屬性 A，他需要遍歷一個巨大的陣列並做大量的計算，然後我們可能有其他的計算屬性依賴於 A。如果沒有快取我們將不可避免的多次執行 A 的getter。如果不希望有快取出現，請用方法代替。

　　計算屬性的 setter

　　計算屬性預設只有 getter ，不過在需要時也可以提供一個 setter

　　computed: {
　　　　str: {
　　　　　　get: function() {
　　　　　　　　return this.a + this.b
　　　　　　},
　　　　　　set: function(newVlaue) {
　　　　　　　　var abs = newValue.split(' ')
　　　　　　　　this.a = abs[0]
　　　　　　　　this.b = abs[abs.length - 1]
　　　　　　}
　　　　}
　　}

　　現在執行 this.str = '2 3 4 5'時，setter 會被呼叫，this.a 和 this.b 也會相應地被更新

5.methods　事件處理

　　在模板中通過 v-on 定義方法名，在 methods 中定義方法

　　有時在內聯語句處理器中訪問原始的 DOM 事件，可以用特殊變數 $event 把它傳入方法

<button @click="count(200, $event)">按鈕</button>
<button @click="count2">按鈕2</button>

　　methods: {
　　　　count: function(val, event) {
　　　　　　if(event) {
　　　　　　　　event.preventDefault()
　　　　　　}
　　　　　　// ...
　　　　},
　　　　count2: function(event) {// 如果模板中什麼都不傳遞，在這裡可以預設直接接受一個引數就是 dom 物件
　　　　　　if(event) {
　　　　　　　　event.preventDefault()
　　　　　　}
　　　　　　// ...
　　　　}
　　}

6.watch　監聽器

　　一個物件，鍵是需要觀察的表示式，值是對應回撥函式，值也可以是方法名，或者包含選項的物件。Vue 例項將會在例項化時呼叫 $watch()，遍歷 watch 物件的每一個屬性

　　值是包括選項的物件，有三個選項

　　handler：回撥函式，即監聽到變化時應該執行的函式

　　deep： Boolean，確認是否深度監聽

　　　　為了發現物件內部值的變化，可以在選項引數中指定 deep: true 注意監聽陣列的變更不需要這麼做

　　immediate：Boolean，為true時，將立即以表示式的當前值出發回撥（進入頁面就開始監聽）

　　watch: {
　　　　a(){},
　　　　// 該回調會在任何被監聽的物件 property 改變時被呼叫，不論其被巢狀多深
　　　　b: {
　　　　　　handler: function(){},
　　　　　　deep: true
　　　　},
　　　　// 該回調將會在偵聽開始之後立即呼叫
　　　　c: {
　　　　　　handler: function(),
　　　　　　immediate: true
　　　　},
　　　　// 可以傳入回撥陣列，他們會被一一呼叫
　　　　d: [
　　　　　　handle1,
　　　　　　function handle2(){},
　　　　　　{
　　　　　　　　handler: function handle3(){}
　　　　　　}
　　　　]
　　}

二、選項 / DOM

在開發的過程中很少需要考慮這些東西，看看官網熟悉一下

　　到官網去了解一下

 三、選項 / 生命週期鉤子

　　每個 Vue 例項在被建立時都要經過一系列的初始化過程，設定資料監聽，編譯模板，例項掛載到 DOM ，資料變化時更新 DOM 等，這裡面有一系列的函式，稱之為生命週期鉤子

1.beforeCreate

　　在例項初始化之後，資料觀測(data observer) 和 event/watcher 事件配置之前被呼叫，此時元件的選項物件還沒有建立，el 和 data 並未初始化，因此無法訪問 methods，data，computed 等上的方法和資料

2.created

　　在例項建立完成之後被立即呼叫。這一步，例項已經完成以下配置：資料觀測(data observer)，property 和方法的運算，watch/event 事件回撥。然而掛載階段還沒開始，$el property 目前尚不可用。這是一個常用的生命週期，這裡面可以呼叫 methods 中的方法，改變 data 中的資料，並且修改可以通過 vue 的響應式繫結體現在頁面上，獲取 計算屬性 等等，通常我們在這裡請求介面中的資料，

3.beforeMount

　　在掛在之前被呼叫，相關的 render 函式首次被呼叫，例項已經完成一下的配置：編譯模板，把 data 裡面的資料和模板生成 html，完成了 el 和 data 初始化，注意此時還沒有掛載到 html 頁面上

4.mounted

　　例項被掛載後被呼叫，這時 el 被新建立的 vm.$el 替換了。如果跟例項掛載到了一個文件內的元素上，當 mounted 被呼叫時 vm.$el 也在文件內

　　注意 mounted 不會保證所有的子元件也一起被掛載，如果希望等到整個檢視都渲染完畢，可以在 mounted 內部使用 vm.$nextTick 

　　mounted(){
　　　　this.$nextTick(function(){
　　　　　　// ...
　　　　})
　　}

5.beforeUpdate

　　資料更新時呼叫，發生在虛擬 DOM 打補丁之前，這裡適合在更新之前訪問現有的 DOM，比如手動移除已新增的事件監聽器。

　　該鉤子在伺服器端渲染期間不被呼叫，因為只有初次渲染會在服務端進行

6.updated

　　由於資料更改導致的虛擬 DOM 重新渲染和打補丁，在這之後會呼叫該鉤子。

　　當這個鉤子被呼叫時，元件 DOM 已經更新，所以你現在可以執行依賴於 DOM 的操作。然而大多數情況下，你應該避免在此期間更改狀態。如果要相應狀態改變，通常最好使用 計算屬性 或 watcher 取而代之。

　　注意 updated 不會保證所有子元件也都一起被重繪。如果你希望等到整個檢視都重繪完畢，可以在 updated 裡使用 vm.$nextTick（同上）

 7.activated

　　被 keep-alive 快取的元件啟用時呼叫

　　該鉤子在伺服器端渲染期間不被呼叫

8.deactivated

　　被 keep-alive 快取的元件停用時被呼叫

　　該鉤子在伺服器端渲染期間不被呼叫

9.beforeDestroy

　　例項銷燬之前呼叫。在這一步，例項仍然完全可用

　　該鉤子在伺服器端渲染期間不被呼叫

10.destroyed

　　例項銷燬後呼叫，該鉤子被呼叫後，對應 Vue 例項的所有指令都被解綁，所有的事件監聽器被移除，所有的子例項也都被銷燬

　　該鉤子在伺服器端渲染期間不被呼叫

11.errorCaptured

　　當捕獲一個來自子孫元件的錯誤時被呼叫，此鉤子會收到三個引數：錯誤物件、發生錯誤的元件例項和一個包含錯誤來源資訊的字串。此鉤子返回 false 以阻止該錯誤繼續向上傳播

　　可以在此鉤子中修改元件的狀態。因此在捕獲錯誤時，在模板或渲染函式中有一個條件判斷來繞過其他內容就很重要，不然該元件可能會進入一個無限的渲染迴圈

　　錯誤傳播規則

　　　　1.預設情況下，如果全域性的 config.errorHandler 被定義，所有的錯誤仍會發送它，因此這些錯誤仍然會向單一的分析服務的地方進行彙報。

　　　　2.如果一個組建的繼承或父級從屬鏈路中存在多個 errorCaptured 鉤子，則它們將會被相同的錯誤一一喚起

　　　　3.如果此 errorCaptured 鉤子自身丟擲了一個錯誤，則這個新錯誤和原本被捕獲的錯誤都會發送給全域性的 config.errorHandler

　　　　4.一個 errorCaptured 鉤子能夠返回 false 以阻止錯誤繼續向上傳播。本質上是說’這個錯誤已經被搞定且應該被忽略‘。他會阻止其他任何會被這個錯誤喚起的 errorCaptured 鉤子和全域性的 config.errorHandler

四、選項 / 資源

1.directives　自定義指令

2.filters　過濾器

3.components　元件

　　directives、filters、components 詳情在這裡有介紹 vue API 知識點（1）---全域性 API 總結

五、選項 / 組合

1.parent

　　指定已建立的例項之父示例，在兩者之間建立父子關係。子例項可以用 this.$parent 訪問父例項，子例項被推入到父例項的 $children 陣列中

　　我們在開發中，基本上不會使用到 $parent 和 $children 。更多的是使用 props 和 events 實現父子元件通訊，

2.mixins　混入

3.extends

　　允許宣告擴充套件另一個元件，而無需使用 Vue.extend。這主要是為了便於擴充套件單檔案元件

　　這和 mixins 有點類似　

　　mixins、extends 在這篇文章中有詳細的介紹  vue API 知識點（1）---全域性 API 總結

4.provide / inject 

　　provide 和 inject 主要在開發高階外掛/元件庫時使用。並不推薦用於普通應用程式程式碼中。

　　這對選項需要一起使用，以允許一個祖先元件向其所有子孫後代注入一個依賴，不論元件層次有多深，並在其上下游關係成立的時間裡始終生效。

　　解析：就是元件的引入層次過多，我們的子孫元件想要獲取祖先元件的資源，可以不使用 props 的方式依次傳遞給子孫元件，層次太多，程式碼結構容易混亂。那麼就可以使用 provide/inject 來做傳遞

　　官方註解

　　provide 選項應該是一個物件或返回一個物件的函式。該物件包含可注入其子孫的 property。在該物件中你可以使用 Symbols 作為key，但是隻在原生支援 Symbol 和 Reflect.ownKeys 的環境下可工作

　　inject 選項應該是一個字串陣列或一個物件，物件的key是本地的繫結名，

　　　　value 是 在可用的注入內容中搜索用的 key（字串或 Symbol），或一個物件，該物件的

　　　　　　from property 是在可用的諸如內容中搜索用的 key（字串或 Symbol）

 　　　　　　default property 是降級情況下使用的 value

　　個人解析

　　provide 是一個物件，或者是一個返回物件的函式，裡面就包含要給子孫後代的東西，也就是屬性和屬性值

　　inject 一個字串陣列，或者是一個物件。屬性值可以是一個物件，包含 from 和 default 預設值

　　const Child = {
　　　　inject: {
　　　　　　foo: {
　　　　　　　　from: 'bar',
　　　　　　　　default: 'foo'
　　　　　　}
　　　　}
　　}

　　　　from 表示在可用的注入內容中搜索用的 key，default 當然就是預設值

 　　注意：provide 和 inject 繫結並不是可響應的。這是刻意為之的，然而，如果你傳入了一個可監聽的物件，那麼其物件的 property 還是可響應的

 　　官方示例

 　　// 父元件
　　var Provider = {
　　　　provide: {
　　　　　　name: 'zhangning'
　　　　},
　　　　// ...
　　}

　　// 子元件注入
　　var Child = {
　　　　inject: ['name'],
　　　　created() {
　　　　　　console.log(this.name) // => 'zhangning'
　　　　}
　　}

　　利用 es 中的 Symbols、函式 provide 和物件 inject

　　const a = Symbol();
　　const Parent = {
　　　　provide(){
　　　　　　return {
　　　　　　　　[a]: 'zhangning187'
　　　　　　}
　　　　}
　　}

　　const Child = {
　　　　inject: { a },
　　　　// ...
　　}

　　在新版本中，使用一個注入的值作為一個 property 的預設值

　　const Child = {
　　　　inject: ['name'],
　　　　props: {
　　　　　　bar: {
　　　　　　　　default() {
　　　　　　　　　　return this.name
　　　　　　　　}
　　　　　　}
　　　　}
　　}

　　使用一個注入的值作為資料入口

　　const Child = {
　　　　inject: ['name'],
　　　　data() {
　　　　　　return {
　　　　　　　　bar: this.name
　　　　　　}
　　　　}
　　}

　　如果它需要從一個不同名字的 property 注入，則使用 from 來表示其源 property

　　const Child = {
　　　　inject: {
　　　　　　from: 'bar',
　　　　　　default: 'name'
　　　　}
　　}

　　與 prop 的預設值類似，你需要對非原始值使用一個工廠方法

　　const Child = {
　　　　inject: {
　　　　　　name: {
　　　　　　　　from: 'bar',
　　　　　　　　default: () => [1, 2, 3]
　　　　　　}
　　　　}
　　}

 　　在日常的開發中，我們經常會使用 Vuex 做狀態管理，但是 vuex 有時候太過於繁瑣。如果我們不想使用 vuex，這個時候我們就可以使用 provide/inject 這個方式來代替vuex，在跟元件中傳入變數，然後在後代元件中使用即可

　　// 在跟元件中提供一個非響應式變數給後代元件

　　export default {
　　　　provide() {
　　　　　　return {
　　　　　　　　text: 'zhangning'
　　　　　　}
　　　　}
　　}

　　// 後代元件注入 
　　export default {
　　　　inject: ['text'],
　　　　created() {
　　　　　　this.text = 'zhangning187'// 在我們使用 text 的時候它依然是 zhangning，而不是zhangning187
　　　　}
　　}

　　上面已經講過，provide 和 inject 繫結並不是可響應的，這是可以為之。當然我們也可以傳入一個可響應的物件，那麼它的屬性也就是可響應的了

　　也就是說，Vue 不會對 provide 中的變數進行響應式處理。所以要想 inject 接受的變數是響應式的，provide 提供的變數本身就需要是響應式的。

　　由於元件內部的各種狀態就是可響應式的，所以我們直接在根元件中將元件本身注入 provide，此時，我們可以在後代元件中任意訪問根元件中的所有狀態，根元件就成為了全域性狀態的容器

　　// 根元件提供將自身提供給後代元件
　　export default {
　　　　provide() {
　　　　　　return {
　　　　　　　　app: this
　　　　　　}
　　　　},
　　　　data() {
　　　　　　return {
　　　　　　　　text: 'zhangning'
　　　　　　}
　　　　}
　　}

　　// 後代元件 注入

　　export default {
　　　　inject: ['app'],
　　　　data(){
　　　　　　return{}
　　　　},
　　　　created: {
　　　　　　this.app.text = 'zhangning187'// 此時使用 text，它的值就是zhangning187
　　　　}
　　}

　　當然，我們也可以通過 $root 來獲取根節點，但是在團隊開發的過程中，如果所有的全域性變數都統一定義在根元件中並不合適，而使用 provide/inject 不同模組的入口元件傳給各自的後代元件可以完美解決這個問題

　　Vuex 和 provide/inject 區別在於，Vuex 中的全域性狀態的每次修改都是可以追蹤回溯的，而 provide/inject 中變數的修改是無法控制的，通俗說就是，你不知道是哪個元件修改了這個全域性狀態。

　　provide/inject 破壞了我們的單向資料流原則。如果多個後代元件同時依賴於一個祖先元件提供的狀態，那麼只要有一個元件修改了這個狀態，則所有元件都會受到影響。這個使耦合度增加了，讓我們的資料變化不可控，在多人的開發過程中，這個可能會變得特別混亂。

　　以上看起來使用 provide/inject 做全域性狀態管理好像很危險，所以我們要謹慎使用這個方式。

　　但是在元件開發的時候，vue 官方提倡我們使用這種方法。例如 elment-ui 

六、選項 / 其他

1.name

　　只有作為元件選項時起作用

　　允許元件模板遞迴地呼叫自身，注意，元件在全域性用 Vue.component() 註冊時，全域性 ID 自動作為元件的 name

　　指定 name 選項的好處就是便於除錯，有名字的元件有更友好的警告資訊，當在 vue-devtools 下，未命名元件將顯示成<AnonymousComponent>，這很沒有語義，通過提供 name 選項，可以獲得更有語義資訊的元件樹

2.delimiters

　　瞭解一下就行，通常不會去更改插入分隔符

　　型別 Array<string>

　　預設值 ["{{", "}}"]

　　限制 這個選項只在完整構建版本中的瀏覽器內編譯時可用

　　改變純文字插入分隔符

　　示例

　　new Vue({
　　　　delimiters: ["${", "}"]
　　})
　　// 分隔符變成了 ES6 模板字串的風格

3.functional

　　瞭解一下，通常用不到

　　型別 Boolean

　　使元件組狀態（沒有 data）和無例項（沒有 this 上下文）。他們用一個簡單的 render 函式返回虛擬節點，是他們渲染的代價更小

4.model

　　允許一個自定義元件在使用 v-model 時定製 prop 和 event。預設情況下，一個元件上的 v-model 會把 value 用作 prop 且把 input 用作 event，但是一下輸入型別比如單選框和複選框按鈕可能想使用 value prop 來達到不同的目的。使用 model 選項可以迴避這些情況產生的衝突

　　// 定義一個元件

　　Vue.component('my-check', {
　　　　model: {
　　　　　　prop: 'checked',
　　　　　　event: 'change'
　　　　},
　　　　props: {
　　　　　　value: String,
　　　　　　checked: {
　　　　　　　　type: Number,
　　　　　　　　default: 0
　　　　　　}
　　　　}
　　})

　　使用

　　<my-check v-model='foo' value='some value'></my-check>

　　以上程式碼相當於

　　<my-check :checked='foo' @change='value=>{foo = val}' value='some value'></my-check>

　　我們先了解一下 input 中的 v-model 是怎麼實現雙向繫結的。

　　<input type='text' v-model='msg'>

　　v-model 只是語法糖真正的實現方式

　　<input type='text' :value='msg' @input='msg=$event.target.value'>

　　真正的雙向繫結是通過監聽 input 事件

　　　　v-model 在內部為不同的輸入元素使用不同的屬性並丟擲不同的事件

　　　　text 和 textarea 元素使用 value 屬性和 input 事件

　　　　checkbox 和 radio 使用 checked 屬性和 change 事件

　　　　select 使用 value 和 change 事件

　　我們可以自定義輸入框元件的 v-model，雙向繫結

　　Vue.component('my-input', {
　　　　template: `<input :value='value' @input='updateValue($event.target.value)' type='text'></input>`,
　　　　props: ['value'],
　　　　methods: {
　　　　　　updateValue(val) {
　　　　　　　　this.$emit('input', val)
　　　　　　}
　　　　}
　　})

　　let app = new Vue({
　　　　el: '#app',
　　　　data(){
　　　　　　message: ''
　　　　},
　　　　methods: {
　　　　　　handleInput(val) {
　　　　　　　　this.message = val
　　　　　　}
　　　　}
　　})

　　<div id='app'>
　　　　<my-input :value='message' @input='handleInput'></my-input>
　　</div>

　　上面的示例我們可以瞭解到，預設情況下，一個元件上的 v-model 會把 value 用作 prop 且把 input 用作 event，所以當我們在一個自定義元件上使用 v-model 並不能實現雙向繫結，因為自定義的元件並沒有預設的 value 和 input 事件，在使用時，我們需要按照上面那樣顯式的去宣告定義這些東西，這時，選項 model 就派上用場了，在定義元件的時候指定 prop 的值和監聽的事件（看到這裡，上面寫的官網給出的例子也應該可以看明白了）

　　舉例

　　Vue.component('my-input', {
　　　　model: {
　　　　　　prop: 'uname',
　　　　　　event: 'handleChange'
　　　　},
　　　　props: {
　　　　　　uname: {
　　　　　　　　type: String,
　　　　　　　　default: 'zhangning'
　　　　　　}
　　　　},
　　　　methods: {
　　　　　　updateVal(val) {
　　　　　　　　this.$emit('handleChange', val)
　　　　　　}
　　　　}
　　})

　　模板

　　<template>
　　　　<div>
　　　　　　<input type='text' :value='uname' @input='updateVal($event.target.value)'>
　　　　</div>
　　</template>

　　使用元件

　　<my-input v-model='name' value='some value'></my-input>

　　等價於

　　　<my-input :uname='name' @handleChange='val=>{foo = val}' value='some value'></my-input>

　　上面的示例中我們就可以在自定義的元件中使用 v-model 來進行雙向綁定了（多看一下示例就明白了）

&n