data
- 類型:
Object | Function
- 限制:組件的定義只接受
function
。 - 詳細:
Vue 實例的數據對象。Vue 將會遞歸將 data 的屬性轉換爲 getter/setter,從而讓 data 的屬性能夠響應數據變化。對象必須是純粹的對象 (含有零個或多個的 key/value 對):瀏覽器 API 創建的原生對象,原型上的屬性會被忽略。大概來說,data 應該只能是數據 - 不推薦觀察擁有狀態行爲的對象。
一旦觀察過,不需要再次在數據對象上添加響應式屬性。因此推薦在創建實例之前,就聲明所有的根級響應式屬性。
實例創建之後,可以通過vm.$data
訪問原始數據對象。Vue 實例也代理了 data 對象上所有的屬性,因此訪問vm.a
等價於訪問vm.$data.a
。
以 _ 或 $ 開頭的屬性 不會 被 Vue 實例代理,因爲它們可能和 Vue 內置的屬性、API 方法衝突。你可以使用例如vm.$data._property
的方式訪問這些屬性。
當一個組件被定義,data
必須聲明爲返回一個初始數據對象的函數,因爲組件可能被用來創建多個實例。如果data
仍然是一個純粹的對象,則所有的實例將共享引用同一個數據對象!通過提供data
函數,每次創建一個新實例後,我們能夠調用 data 函數,從而返回初始數據的一個全新副本數據對象。
如果需要,可以通過將vm.$data
傳入JSON.parse(JSON.stringify(...))
得到深拷貝的原始數據對象。
示例:
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 }
}
})
注意,如果你爲 data 屬性使用了箭頭函數,則 this 不會指向這個組件的實例,不過你仍然可以將其實例作爲函數的第一個參數來訪問。
data: vm => ({ a: vm.myProp })
props
- 類型:
Array<string> | Object
- 詳細:
props 可以是數組或對象,用於接收來自父組件的數據。props 可以是簡單的數組,或者使用對象作爲替代,對象允許配置高級選項,如類型檢測、自定義驗證和設置默認值。
你可以基於對象的語法使用以下選項:
type
: 可以是下列原生構造函數中的一種:String
、Number
、Boolean
、Array
、Object
、Date
、Function
、Symbo
l、任何自定義構造函數、或上述內容組成的數組。會檢查一個 prop 是否是給定的類型,否則拋出警告。Prop 類型的更多信息在此。default
:any
爲該 prop 指定一個默認值。如果該 prop 沒有被傳入,則換做用這個值。對象或數組的默認值必須從一個工廠函數返回。required
:Boolean
定義該 prop 是否是必填項。在非生產環境中,如果這個值爲 truthy 且該 prop 沒有被傳入的,則一個控制檯警告將會被拋出。validator
:Function
自定義驗證函數會將該 prop 的值作爲唯一的參數代入。在非生產環境下,如果該函數返回一個 falsy 的值 (也就是驗證失敗),一個控制檯警告將會被拋出。你可以在這裏查閱更多 prop 驗證的相關信息。
示例:
// 簡單語法
Vue.component('props-demo-simple', {
props: ['size', 'myMessage']
})
// 對象語法,提供驗證
Vue.component('props-demo-advanced', {
props: {
// 檢測類型
height: Number,
// 檢測類型 + 其他驗證
age: {
type: Number,
default: 0,
required: true,
validator: function (value) {
return value >= 0
}
}
}
})
propsData
- 類型:
{ [key: string]: any }
- 限制:只用於
new
創建的實例中。 - 詳細:
創建實例時傳遞 props。主要作用是方便測試。
示例:
var Comp = Vue.extend({
props: ['msg'],
template: '<div>{{ msg }}</div>'
})
var vm = new Comp({
propsData: {
msg: 'hello'
}
})
computed
- 類型:
{ [key: string]: Function | { get: Function, set: Function } }
- 詳細:
計算屬性將被混入到 Vue 實例中。所有 getter 和 setter 的this
上下文自動地綁定爲 Vue 實例。
注意如果你爲一個計算屬性使用了箭頭函數,則 this 不會指向這個組件的實例,不過你仍然可以將其實例作爲函數的第一個參數來訪問。
computed: {
aDouble: vm => vm.a * 2
}
計算屬性的結果會被緩存,除非依賴的響應式屬性變化纔會重新計算。注意,如果某個依賴 (比如非響應式屬性) 在該實例範疇之外,則計算屬性是不會被更新的。
示例:
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
methods
- 類型:
{ [key: string]: Function }
- 詳細:
methods 將被混入到 Vue 實例中。可以直接通過 VM 實例訪問這些方法,或者在指令表達式中使用。方法中的this
自動綁定爲 Vue 實例。
注意,不應該使用箭頭函數來定義 method 函數 (例如
plus: () => this.a++
)。理由是箭頭函數綁定了父級作用域的上下文,所以this
將不會按照期望指向 Vue 實例,this.a
將是 undefined。
示例:
var vm = new Vue({
data: { a: 1 },
methods: {
plus: function () {
this.a++
}
}
})
vm.plus()
vm.a // 2
watch
- 類型:
{ [key: string]: string | Function | Object | Array }
- 詳細:
一個對象,鍵是需要觀察的表達式,值是對應回調函數。值也可以是方法名,或者包含選項的對象。Vue 實例將會在實例化時調用$watch()
,遍歷 watch 對象的每一個屬性。
示例:
var vm = new Vue({
data: {
a: 1,
b: 2,
c: 3,
d: 4,
e: {
f: {
g: 5
}
}
},
watch: {
a: function (val, oldVal) {
console.log('new: %s, old: %s', val, oldVal)
},
// 方法名
b: 'someMethod',
// 該回調會在任何被偵聽的對象的 property 改變時被調用,不論其被嵌套多深
c: {
handler: function (val, oldVal) { /* ... */ },
deep: true
},
// 該回調將會在偵聽開始之後被立即調用
d: {
handler: 'someMethod',
immediate: true
},
e: [
'handle1',
function handle2 (val, oldVal) { /* ... */ },
{
handler: function handle3 (val, oldVal) { /* ... */ },
/* ... */
}
],
// watch vm.e.f's value: {g: 5}
'e.f': function (val, oldVal) { /* ... */ }
}
})
vm.a = 2 // => new: 2, old: 1
注意,不應該使用箭頭函數來定義 watcher 函數 (例如 searchQuery:
newValue => this.updateAutocomplete(newValue)
)。理由是箭頭函數綁定了父級作用域的上下文,所以 this 將不會按照期望指向 Vue 實例,this.updateAutocomplete
將是 undefined。