一、選項/資料
1. data
- 型別:
Object | Function
- 元件的定義只接受
Function
- 因為元件可能被用來建立多個例項。如果
data
仍然是一個純粹的物件,則所有的例項將共享引用同一個資料物件!而通過data
函式,每次建立一個新例項後,我們能夠呼叫data
函式,從而返回初始資料的一個全新副本資料物件。
data
屬性使用箭頭函式,則this
不會指向這個元件的例項- 如果你為data屬性使用了箭頭函式,則this不會指向這個元件的例項,不過仍然可以將其例項作為函式的第一個引數來訪問
data:vm=>({a:vm.myProp})複製程式碼
2. props
- 如果你為data屬性使用了箭頭函式,則this不會指向這個元件的例項,不過仍然可以將其例項作為函式的第一個引數來訪問
- 型別:
Array<string> | Object
用於接收來自父元件的資料。 - 使用物件
object
有以下選項: - type:
String
、Number
、Boolean
、Array
、Object
、Date
、Function
、Symbol
、自定義建構函式 - default:預設值,物件或陣列的預設值必須從一個工廠函式返回
- required:
Boolean
,定義是否是必填項 - validator:
Function
,自定義驗證函式
// 物件語法,提供驗證
Vue.component('props-demo-advanced', {
props: {
// 檢測型別
height: Number,
// 檢測型別 + 其他驗證
age: {
type: Number,
default: 0,
required: true,
validator: function (value) {
return value >= 0
}
}
}
})複製程式碼
- Prop的大小寫,camelCase (駝峰命名法) 的 prop 名需要使用其等價的 kebab-case (短橫線分隔命名) 命名
Vue.component('blog-post', {
// 在 JavaScript 中是 camelCase 的
props: ['postTitle'],
template: '<h3>{{ postTitle }}</h3>'
})複製程式碼
<!-- 在 HTML 中是 kebab-case 的 -->
<blog-post post-title="hello!"></blog-post>複製程式碼
- 單項資料流
- 父級prop的更新會向下流動到子元件中,但是反過來不行。所以就意味著不能在子元件內改變prop
- 使用計算屬性對prop原始值進行轉換
props: ['size'],
computed: {
normalizedSize: function () {
return this.size.trim().toLowerCase()
}
}複製程式碼
3. computed
- 型別:
{[key : string] : Function | {get : Function,set : Function}}複製程式碼
- 計算屬性快取 VS 方法
computed:{
reverseName:function(){
return this.name.split('.').reverse().join('.')
}
}複製程式碼
methods:{
reverseName(){
return this.name.split('.').reverse().join('.')
}
}複製程式碼
以上兩種方式呼叫都可以達到同樣效果,不同的是計算屬性computed是基於他們的響應式依賴name
進行快取的。name
還沒有改變,多次訪問reverseName
計算屬性會從快取中返回之前的計算結果。而呼叫方法將總會再次執行函式。
- 計算屬性 VS 偵聽屬性
data: {
firstName: 'Foo',
lastName: 'Bar',
fullName: 'Foo Bar'
},
watch: {
firstName: function (val) {
this.fullName = val + ' ' + this.lastName
},
lastName: function (val) {
this.fullName = this.firstName + ' ' + val
}
}複製程式碼
data: {
firstName: 'Foo',
lastName: 'Bar'
},
computed: {
fullName: function () {
return this.firstName + ' ' + this.lastName
}
}複製程式碼
不能濫用watch
,通常更好做法是使用計算屬性而不是命令式的watch
回撥
4. method
- 型別:{ [ key:string ] : Function }
- 不應該使用箭頭函式來定義method函式,箭頭函式繫結了父級作用域的上下文
5.watch
- 型別:{ [key:string] : string | Function | Object | Array }
- 主要用於觀測某個值的變化去完成一段開銷較大的複雜業務邏輯
二、選項/DOM
1. el
- 型別:
string | Element
- 可以是css選擇器,也可以是HTMLElement例項
- 例項掛載之後,可以
用vm.$el
來訪問 - 如果例項化時存在這個選項,例項將立即進入編譯過程,否則需要顯示呼叫vm.$mount()手動開啟編譯。
var MyComponent = Vue.extend({
template: '<div>Hello!</div>'
})
// 建立並掛載到 #app (會替換 #app)
new MyComponent().$mount('#app')
// 或者
new MyComponent().$mount(document.querySelector('#app'))複製程式碼
2. template
- 型別:
string
- 模板將會替換掛載的元素。掛載元素的內容都將被忽略,除非模板的內容有分發插槽
slot
<alert-box>
Something bad happened.
</alert-box>複製程式碼
Vue.component('alert-box', {
template: `
<div class="demo-alert-box">
<strong>Error!</strong>
<slot></slot>
</div>
`
})複製程式碼
3. render
- 型別:
(createElement:() => VNode)=>VNode
三、選項/生命週期鉤子
1. beforeCreate
- 型別:Function
- 例項初始化之後,資料觀測(data observer)和event/watcher事件配置之前被呼叫。
2. created
- 型別:Function
- 這一步,例項完成以下配置:資料觀測(data observer),屬性和方法運算,watch/event事件回撥。然而,掛載階段還沒開始,$el屬性目前不可見
3. beforeMount
- 型別:Function
- 相關的
render
函式首次被呼叫
4. mounted
- 型別:Function
- el被新建立的vm.$el替換,並掛載到例項上去之後呼叫該鉤子。
- 注意
mounted
不會承諾所有的子元件也都一起被掛載。如果希望等到整個檢視都渲染完畢,可以用vm.$nextTick替換掉mounted
5. beforeUpdate
- 型別:Function
- 相關的
render
函式首次被呼叫