Vue實例的選項有哪些

一、數據

API：https://cn.vuejs.org/v2/api/#%E9%80%89%E9%A1%B9-%E6%95%B0%E6%8D%AE

1. data

類型：Object | Function

限制：組件的定義只接受 function

詳細：Vue 實例的數據對象。Vue 將會遞歸將 data 的屬性轉換為 getter/setter，從而讓 data 的屬性能夠響應數據變化。對象必須是純粹的對象 (含有零個或多個的 key/value 對)。當一個組件被定義，data 必須聲明為返回一個初始數據對象的函數，因為組件可能被用來創建多個實例。如果 data 仍然是一個純粹的對象，則所有的實例將共享引用同一個數據對象！通過提供 data 函數，每次創建一個新實例后，我們能夠調用 data 函數，從而返回初始數據的一個全新副本數據對象。

var data = { a: 1 }

// 直接創建一個實例
var vm = new Vue({
  data: data
})
vm.a // => 1
vm.$data === data // => true

// Vue.extend() 中 data 必須是函數
var Component = Vue.extend({
  data: function () {
    return { a: 1 }
  }
})

2. computed

類型：{ [key: string]: Function | { get: Function, set: Function } }

詳細：計算屬性將被混入到 Vue 實例中。所有 getter 和 setter 的 this 上下文自動地綁定為 Vue 實例。計算屬性的結果會被緩存，除非依賴的響應式屬性變化才會重新計算。注意，如果某個依賴 (比如非響應式屬性) 在該實例范疇之外，則計算屬性是不會被更新的。

var vm = new Vue({
  data: { a: 1 },
  computed: {
    // 僅讀取
    aDouble: function () {
      return this.a * 2
    },
    // 讀取和設置
    aPlus: {
      get: function () {
        return this.a + 1
      },
      set: function (v) {
        this.a = v - 1
      }
    }
  }
})
vm.aPlus   // => 2
vm.aPlus = 3
vm.a       // => 2
vm.aDouble // => 4

3. methods

類型：{ [key: string]: Function } 

詳細：methods 將被混入到 Vue 實例中。可以直接通過 VM 實例訪問這些方法，或者在指令表達式中使用。方法中的 this 自動綁定為 Vue 實例。

var vm = new Vue({
  data: { a: 1 },
  methods: {
    plus: function () {
      this.a++
    }
  }
})
vm.plus()
vm.a // 2

4. watch

類型：{ [key: string]: string | Function | Object | Array }

詳細：一個對象，鍵是需要觀察的表達式，值是對應回調函數。值也可以是方法名，或者包含選項的對象。Vue 實例將會在實例化時調用 $watch()，遍歷 watch 對象的每一個屬性。

5. props

類型：Array<string> | Object

詳細：props 可以是數組或對象，用於接收來自父組件的數據。props 可以是簡單的數組，或者使用對象作為替代，對象允許配置高級選項，如類型檢測、自定義驗證和設置默認值。

你可以基於對象的語法使用以下選項：

• type: 可以是下列原生構造函數中的一種：String、Number、Boolean、Array、Object、Date、Function、Symbol、任何自定義構造函數、或上述內容組成的數組。會檢查一個 prop 是否是給定的類型，否則拋出警告。Prop 類型的更多信息在此。
• default: any 為該 prop 指定一個默認值。如果該 prop 沒有被傳入，則換做用這個值。對象或數組的默認值必須從一個工廠函數返回。
• required: Boolean 定義該 prop 是否是必填項。在非生產環境中，如果這個值為 truthy 且該 prop 沒有被傳入的，則一個控制台警告將會被拋出。 
• validator: Function 自定義驗證函數會將該 prop 的值作為唯一的參數代入。在非生產環境下，如果該函數返回一個 falsy 的值 (也就是驗證失敗)，一個控制台警告將會被拋出。你可以在這里查閱更多 prop 驗證的相關信息。

二、DOM

API：https://cn.vuejs.org/v2/api/#%E9%80%89%E9%A1%B9-DOM