[TOC]
## 1. 選項/組合
### 1.1 mixins
可以在混入中添加組件的額外事件（組件內事件，但不適合放在methods），此外可以使用混入來寫jsx語法，jsx內鉤子函數會優先于組件內鉤子函數觸發。
## 2. 實例選項/數據
### 2.1 props
`default` 設置初始值，如果傳入屬性的類型為Array或者Object,則必須使用函數來返回初始值
~~~
props: {
type: Array,
default: function() {
return [0, 1, 2]
}
}
~~~
### 2.2 computed
> 計算屬性，多用于處理插值表達式，返回處理結果。
~~~
<div>
?<!-- 使用時將它視為一個屬性值而不是在調用一個方法 -->
{{ fullName }}
</div>
?
computed: {
fullName: function() { return '' }
}
~~~
### 2.3 watch
監聽一個對象的所有屬性更改：
~~~
obj: {
?handler(newVal) {
? ?console.error('newVal', newVal)
},
?deep: true
}
~~~
監聽對象下具體的屬性：
~~~
'obj.name': {
?handler(newVal, oldVal) {
? ?console.error('newVal', newVal)
? ?console.error('oldVal', oldVal)
},
deep: true,
?immediate: true // 是否立即執行handler
}
~~~
監聽事件：
> 通過設置 `immediate` 屬性為 `true` 在初始渲染時觸發 `handler` 監聽事件
~~~
handleChange: {
handler(handleChange) {
? console.error('handleChange', handleChange)
? handleChange() // 此時是可以執行的
},
immediate: true
}
~~~
## 3. 實例屬性
### 3.1 vm.$attrs
> 只讀屬性，`$attrs` 會獲取直接父組件傳遞過來的未在props中聲明的屬性，通過 `v-bind="$attrs"` 傳入內部組件，內部組件中 `$attrs` 亦會獲取未在props中聲明的屬性
應用場景： 需要將屬性值傳入內部組件
> tips： 內部組件若想獲取與其直接父組件有相同的屬性時，直接父組件可以通過 `$attrs.` 使用屬性
~~~
<div>
?<Child :name="name" :age="age"/>
</div>
?
components: {
Child
}
~~~
~~~
<div>
?<p>$attrs: {{ $attrs }}</p>
?<p>name by props: {{ name }}</p>
?<p>age: {{ $attrs.age }}</p>
?<Grandson v-bind="$attrs" />
</div>
?
export default {
name: 'Child',
props: {
name: { type: String }
},
components: {
Grandson
}
}
~~~
> 內部組件 `$attrs` 獲取到的是其父組件中通過 `$attrs` 可獲取的屬性
~~~
<div>
?<p>$attrs: {{ $attrs }}</p>
?<p>age: {{ $attrs.age }}</p>
</div>
~~~
### 3.2 vm.$listeners
> this.$listeners可以獲取由父組件傳遞的所有未含 `.native` 修飾器的事件，通過 `v-on="$listeners"` 傳入內部組件，內部組件亦可以獲取這些事件
應用場景： 內部組件想要傳遞屬性值給外部組件
~~~
<div>
?<Child :handleNameEve="handleNameEve" @handleAgeEve="handleAgeEve" />
</div>
?
components: {
Child
},
methods: {
handleNameEve(name) {
console.log(`i'm ${name}`)
},
handleAgeEve(age) {
console.log(`i'm ${age}`)
}
}
~~~
~~~
<div>
? ?<Grandson v-on="$listeners" />
</div>
?
export default {
name: 'Child',
props: {
handleNameEve: { type: Function }
},
mounted() {
? this.handleNameEve('pikaqiu')
? this.$listeners.handleAgeEve(22)
? this.$emit('handleAgeEve', 18)
},
components: {
Grandson
}
}
~~~
~~~
<div>
i'm Grandson
</div>
?
mounted() {
this.$listeners.handleAgeEve(20)
this.$emit('handleAgeEve', 19)
}
~~~
## 4. 實例方法/數據
### 4.1 $set
> 向響應式對象（該對象不能是vm.$data）添加新的響應式屬性，并從觸發視圖更新
## 5. 實例方法/生命周期
### 5.1 $nextTick
> 該函數會在異步刷新dom后執行
應用場景： 等待數據加載loading動畫
~~~
data() {
return {
loading: false
}
},
methods: {
async handleLoadingStatus() {
? this.loading = true
? await this.$nextTick()
? this.loading = false
}
}
~~~
## 6. 內置組件
### 6.1 transition
> 使用 `transition` 包裹元素標簽，給 `transition` 添加 `name` 屬性后自動生成 CSS 過渡類名（也支持自定義過渡類名），不額外產生dom。被包裹元素標簽相同時，需要給定 `key` ,否則動畫失效
### 6.2 transition-group
> tag屬性指定被包裹元素標簽的父元素標簽，默認為span。用于同時渲染整個列表
### 6.3 keep-alive
> 多用于包裹路由，tab切換之類的動態組件, 使用 `include` 和 `exclude` 屬性可以指定那些組件被緩存或不被緩存(vue 2.1以上可用), 指定內容與 **組件名** 相關。此外可用 `max` 指定可緩存的組件數量上限（vue 2.5以上可用）
包裹動態組件
~~~
<div>
?<keep-alive include='ibook'>
<component :is="currentTabComponent"></component>
</keep-alive>
</div>
~~~
包裹路由
> 結合配置 `route` 的 `meta` 屬性一起使用實現緩存
~~~
<keep-alive>
<router-view v-if="this.$route.meta.alive" />
</keep-alive>
<router-view v-if="!this.$route.meta.alive" />
~~~
~~~
export default [{
path: '/',
name: 'home',
meta: {
alive: false,
title: 首頁'
},
component: Home
}, {
path: '/ibook',
name: 'ibook',
meta: {
alive: true,
title: '書籍'
},
component: Ibook
}]
~~~
>[success] 優點：可緩存組件實例（包括 **state** ）提升系統流暢度；可選擇性緩存想要緩存的組件（2.1以后支持）；可配置緩存上限（2.5以后支持）
>[warning] 缺點： 緩存組件實例代表著更多的 **系統內存** 被使用，對于刷新頻率高的組件可以考慮使用，但應該控制組件緩存數量上限（應與組件內容有關）
