本文使用的Vue版本：2.6.10
Vue為我們提供了很多高級特性楞捂，學(xué)習(xí)和掌握它們有助于提高你的代碼水平。
一新啼、watch進階
從我們剛開始學(xué)習(xí)Vue的時候鞋屈，對于偵聽屬性范咨，都是簡單地如下面一般使用：
watch:{
a(){
//doSomething
}
}
實際上，Vue對watch提供了很多進階用法厂庇。
handler函數(shù)
以對象和handler函數(shù)的方式來定義一個監(jiān)聽屬性渠啊，handler就是處理監(jiān)聽變動時的函數(shù)：
watch:{
a:{
handler:'doSomething'
}
},
methods:{
doSomething(){
//當 a 發(fā)生變化的時候，做些處理
}
}
handler有啥用宋列？是多此一舉么昭抒？用途主要有兩點：
- 將處理邏輯抽象出去了，以method的方式被復(fù)用
- 給定義下面兩個重要屬性留出了編寫位置
deep屬性
不知道你注意到了沒有炼杖？
當watch的是一個Object類型的數(shù)據(jù)，如果這個對象內(nèi)部的某個值發(fā)生了改變盗迟，并不會觸發(fā)watch動作坤邪！
也就是說，watch默認情況下罚缕，不監(jiān)測內(nèi)部嵌套數(shù)據(jù)的變動艇纺。但是很多情況下，我們是需要監(jiān)測的！
為解決這一問題黔衡，就要使用deep屬性：
watch:{
obj:{
handler:'doSomething',
deep:true
}
},
methods:{
doSomething(){
//當 obj 發(fā)生變化的時候蚓聘，做些處理
}
}
deep屬性默認為false，也就是我們常用的watch模式盟劫。
immediate屬性
watch 的handler函數(shù)通常情況下只有在監(jiān)聽的屬性發(fā)生改變時才會觸發(fā)夜牡。
但有些時候，我們希望在組件創(chuàng)建后侣签，或者說watch被聲明和綁定的時候塘装，立刻執(zhí)行一次handler函數(shù)，這就需要使用immediate屬性了影所，它默認為false蹦肴，改為true后，就會立刻執(zhí)行handler猴娩。
watch:{
obj:{
handler:'doSomething',
deep:true,
immediate:true
}
},
methods:{
doSomething(){
//當 obj 發(fā)生變化的時候阴幌，做些處理
}
}
同時執(zhí)行多個方法
使用數(shù)組可以設(shè)置多項，形式包括字符串卷中、函數(shù)矛双、對象
watch: {
// 你可以傳入回調(diào)數(shù)組，它們會被逐一調(diào)用
a: [
'handle1',
function handle2 (val, oldVal) { /* ... */ },
{
handler: function handle3 (val, oldVal) { /* ... */ },
/* ... */
}
],
}
二仓坞、$event的不同表現(xiàn)
$event 是事件對象的特殊變量背零，在兩種場景下，它有不同的意義无埃，代表不同的對象徙瓶。
- 在原生事件中表示事件本身〖党疲可以通過
$event.target獲得事件所在的DOM對象侦镇，再通過value進一步獲取具體的值。
<template>
<div>
<input type="text" @input="inputHandler('hello', $event)" />
</div>
</template>
export default {
methods: {
inputHandler(msg, e) {
console.log(e.target.value)
}
}
}
- 而在父子組件通過自定義事件進行通信時织阅，表示從子組件中傳遞出來的參數(shù)值
看下面的例子：
//blog-post組件的模板
<button v-on:click="$emit('enlarge-text', 0.1)">
Enlarge text
</button>
在父級組件監(jiān)聽這個事件的時候壳繁，可以通過 $event 訪問到blog-post子組件傳遞出來的0.1這個值：
<blog-post
...
v-on:enlarge-text="postFontSize += $event"
></blog-post>
此時，$event的值就是0.1荔棉，而不是前面的事件對象闹炉。
三、異步更新隊列
- Vue 在更新 DOM 時是異步執(zhí)行的润樱。
- 只要偵聽到數(shù)據(jù)變化渣触，Vue 將開啟一個隊列，并緩沖在同一事件循環(huán)中發(fā)生的所有數(shù)據(jù)變更壹若。
- 如果同一個 watcher 被多次觸發(fā)嗅钻，只會被推入到隊列中一次皂冰。
這種在緩沖時去除重復(fù)數(shù)據(jù)對于避免不必要的計算和 DOM 操作是非常重要的。然后养篓，在下一個的事件循環(huán)“tick”中秃流，Vue 刷新隊列并執(zhí)行實際 (已去重的) 工作。Vue 在內(nèi)部對異步隊列嘗試使用原生的 Promise.then柳弄、MutationObserver 和 setImmediate舶胀，如果執(zhí)行環(huán)境不支持，則會采用 setTimeout(fn, 0) 代替语御。
例如峻贮，當你設(shè)置 vm.someData = 'new value'，該組件不會立即重新渲染应闯。當刷新隊列時纤控，組件會在下一個事件循環(huán)“tick”中更新。
多數(shù)情況我們不需要關(guān)心這個過程碉纺，但是如果你想基于更新后的 DOM 狀態(tài)來做點什么船万，這就可能會有些棘手。
雖然 Vue.js 通常鼓勵開發(fā)人員使用“數(shù)據(jù)驅(qū)動”的方式思考骨田，避免直接接觸 DOM耿导，但是有時我們必須要這么做。為了在數(shù)據(jù)變化之后等待 Vue 完成更新 DOM态贤，可以在數(shù)據(jù)變化之后立即使用 Vue.nextTick(callback)舱呻。
這樣回調(diào)函數(shù)將在 DOM 更新完成后被調(diào)用。例如：
<div id="example">{{message}}</div>
var vm = new Vue({
el: '#example',
data: {
message: '123'
}
})
vm.message = 'new message' // 更改數(shù)據(jù)
vm.$el.textContent === 'new message' // false
Vue.nextTick(function () {
vm.$el.textContent === 'new message' // true
})
在組件內(nèi)使用 vm.$nextTick() 實例方法特別方便悠汽，因為它不需要全局 Vue箱吕，并且回調(diào)函數(shù)中的 this 將自動綁定到當前的 Vue 實例上：
Vue.component('example', {
template: '<span>{{ message }}</span>',
data: function () {
return {
message: '未更新'
}
},
methods: {
updateMessage: function () {
this.message = '已更新'
console.log(this.$el.textContent) // => '未更新'
this.$nextTick(function () {
console.log(this.$el.textContent) // => '已更新'
})
}
}
})
因為 $nextTick() 返回一個 Promise 對象，所以你可以使用新的 ES2017 async/await 語法完成相同的事情：
methods: {
updateMessage: async function () {
this.message = '已更新'
//在這里可以看出柿冲，message并沒有立刻被執(zhí)行
//要理解頁面刷新和代碼執(zhí)行速度的差別
//通常我們在頁面上立刻就能看到結(jié)果茬高，那是因為一輪隊列執(zhí)行其實很快，感覺不出DOM刷新的過程和所耗費的時間
//但對于代碼的執(zhí)行假抄，屬于即刻級別怎栽，DOM沒更新就是沒更新，就是會有問題
console.log(this.$el.textContent) // => '未更新'
await this.$nextTick()
console.log(this.$el.textContent) // => '已更新'
}
}
通俗的解釋：
Vue的DOM刷新機制是個異步隊列宿饱，并不是你想象中的立刻熏瞄、馬上、即時更新谬以！
這個異步隊列是一輪一輪的執(zhí)行并刷新
上面帶來的問題是巴刻，一些依賴DOM更新完畢才能進行的操作（比如對新增加的DOM元素進行事件綁定），無法立刻執(zhí)行蛉签，必須等待一輪隊列執(zhí)行完畢
最容易碰到上面問題的地方：created生命周期鉤子函數(shù)中對DOM進行操作
解決辦法：使用
this.nextTick(回調(diào)函數(shù))方法胡陪，將對DOM的操作作為它的回調(diào)函數(shù)使用。
四碍舍、函數(shù)式組件
因為傳統(tǒng)編寫模板的能力不足柠座，我們引入了渲染函數(shù)createElement。我們又希望獲得更多的靈活度片橡，于是引入了JSX妈经。最后，我們發(fā)現(xiàn)有些簡單的模板可以更簡單更小巧的實現(xiàn)捧书，于是引入了函數(shù)式組件吹泡。Vue總是試圖為每一種場景提供不同的能力。
有這么一類組件经瓷，它的特點是：
- 比較簡單
- 沒有管理任何狀態(tài)爆哑，也就是說無狀態(tài)，沒有響應(yīng)式數(shù)據(jù)
- 沒有監(jiān)聽任何傳遞給它的狀態(tài)
- 沒有寫生命周期方法
- 本質(zhì)上只是一個接收一些prop的函數(shù)
- 沒有實例舆吮，沒有this上下文
那么這個組件可以定義為函數(shù)式組件揭朝。與普通組件相比，函數(shù)式組件是無狀態(tài)的色冀，無法實例化潭袱，沒有任何的生命周期和方法，適合只依賴于外部數(shù)據(jù)的變化而變化的組件锋恬，因其輕量屯换，渲染性能會有所提高。
創(chuàng)建函數(shù)式組件
- 以定義全局組件的方式
Vue.component('my-component', {
functional: true,
// Props 是可選的
props: {
// ...
},
// 為了彌補缺少的實例
// 提供第二個參數(shù)作為上下文
render: function (createElement, context) {
// ...
}
})
注意其中的functional: true,
在 Vue 2.3.0 或以上的版本中与学，你可以省略
props選項彤悔，所有組件上的 attribute 都會被自動隱式解析為 prop。當使用函數(shù)式組件時癣防，該引用將會是 HTMLElement蜗巧，因為他們是無狀態(tài)的也是無實例的。
- 對于單文件組件蕾盯，創(chuàng)建函數(shù)式組件的方式是在模板標簽內(nèi)幕屹，添加
functional屬性
<template functional>
...
</template>
<script>
...
</script>
<style>
...
</style>
最重要的context參數(shù)
因為無狀態(tài)，沒有this上下文级遭，所以函數(shù)式組件需要的一切都是通過 context 參數(shù)來傳遞望拖，它是一個包括如下字段的對象：
-
props：提供所有 prop 的對象 -
children：VNode 子節(jié)點的數(shù)組 -
slots：一個函數(shù)，返回了包含所有插槽的對象 -
scopedSlots：(2.6.0+) 一個暴露傳入的作用域插槽的對象挫鸽。也以函數(shù)形式暴露普通插槽说敏。 -
data：傳遞給組件的整個數(shù)據(jù)對象，作為createElement的第二個參數(shù)傳入組件 -
parent：對父組件的引用 -
listeners：(2.3.0+) 一個包含了所有父組件為當前組件注冊的事件監(jiān)聽器的對象丢郊。這是data.on的一個別名盔沫。 -
injections：(2.3.0+) 如果使用了inject選項医咨，則該對象包含了應(yīng)當被注入的 property。
應(yīng)用場景
函數(shù)式組件的一個典型應(yīng)用場景是作為包裝組件架诞，比如當你碰到下面需求時：
- 程序化地在多個組件中選擇一個來代為渲染拟淮；
- 在將
children、props谴忧、data傳遞給子組件之前操作它們很泊。
下面是一個 smart-list 組件的例子，它能根據(jù)傳入 prop 的值來代為渲染更具體的組件：
var EmptyList = { /* ... */ }
var TableList = { /* ... */ }
var OrderedList = { /* ... */ }
var UnorderedList = { /* ... */ }
Vue.component('smart-list', {
functional: true,
props: {
items: {
type: Array,
required: true
},
isOrdered: Boolean
},
render: function (createElement, context) {
function appropriateListComponent () {
var items = context.props.items
if (items.length === 0) return EmptyList
if (typeof items[0] === 'object') return TableList
if (context.props.isOrdered) return OrderedList
return UnorderedList
}
return createElement(
appropriateListComponent(),
context.data,
context.children
)
}
})
五沾谓、監(jiān)聽子組件的生命周期
假如我們有父組件Parent和子組件Child委造，如果在父組件中需要監(jiān)聽子組件的mounted這個生命周期函數(shù)，并做一些邏輯處理均驶，常規(guī)寫法可能如下：
// Parent.vue
<Child @mounted="doSth" />
//Child.vue
mounted(){
this.$emit('mounted');
}
但是昏兆，Vue給我們提供了一種更簡便的方法，子組件無需做任何處理辣恋，只需要在父組件引用子組件時使用@hook事件來監(jiān)聽即可亮垫，代碼如下：
// Parent.vue
<Child @hook:mounted="doSth" />
methods:{
doSth(){
//some codes here
}
}
核心是@hook:mounted="doSth"的寫法！
當然這里不僅僅可以監(jiān)聽mounted伟骨，其他生命周期都可以監(jiān)聽饮潦，例如created、updated等携狭。
六继蜡、樣式穿透
我們知道，在單文件組件的style中使用 scoped 屬性后逛腿，父組件的樣式將不會滲透到子組件中稀并。
不過一個子組件的根節(jié)點會同時受其父組件的 scoped CSS 和子組件的 scoped CSS 的影響。這樣設(shè)計是為了讓父組件可以從布局的角度出發(fā)单默，調(diào)整其子組件根元素的樣式碘举。
如果你希望父組件的 scoped 樣式中的一個選擇器能夠作用得“更深”，例如影響子組件搁廓，可以使用深度選擇器： >>> 操作符引颈。
<style scoped>
.a >>> .b { /* ... */ }
</style>
上述代碼將會編譯成：
.a[data-v-f3f3eg9] .b { /* ... */ }
但是，有些像 Sass 之類的預(yù)處理器無法正確解析 >>>境蜕。這種情況下你可以使用 /deep/ 或 ::v-deep 操作符蝙场，這兩者都是 >>> 的別名，實現(xiàn)同樣的功能粱年。
我們都知道售滤，通過 v-html 創(chuàng)建的 DOM 內(nèi)容不受 scoped 樣式影響，可以通過深度作用選擇器>>>來為他們設(shè)置樣式。
七完箩、路由的props屬性
一般在組件內(nèi)使用路由參數(shù)赐俗，大多數(shù)人會這樣做：
export default {
methods: {
getParamsId() {
return this.$route.params.id
}
}
}
當你隨便用用，臨時湊手，這沒什么問題相赁，畢竟解決了需求。
可我們要隨時謹記：組件是用來復(fù)用的！組件應(yīng)該有高度的封閉性咧纠！
在組件中使用 $route 會使它與路由系統(tǒng)形成高度耦合，從而使組件只能在使用了路由功能的項目內(nèi)双藕，或某些特定的 URL 上使用矫俺，限制了其靈活性。
試想一下慷蠕，如果你的組件被人拿去復(fù)用了珊拼，但是那個人并沒有使用路由系統(tǒng)，而是通過別的方式傳遞id參數(shù)流炕，那么他該怎么辦澎现？
正確的做法是通過 props 解耦！
首先每辟，為組件定義一個叫做id的prop：
export default {
props: ['id'],
methods: {
getParamsId() {
return this.id
}
}
}
如果組件沒有對應(yīng)路由剑辫，那么這個id也可以通過父組件向子組件傳值的方式使用。
如果使用了路由渠欺，可以通過路由的prop屬性妹蔽，傳遞id的值：
const router = new VueRouter({
routes: [{
path: '/user/:id',
component: User,
props: true
}]
})
將路由的 props 屬性設(shè)置為 true 后，組件內(nèi)可通過 props 接收到 params 參數(shù)
另外挠将，你還可以通過函數(shù)模式來返回 props
const router = new VueRouter({
routes: [{
path: '/user/:id',
component: User,
props: (route) => ({
id: route.query.id
})
}]
})
其實胳岂，上面的技巧，在VueRouter的官檔都有說明舔稀。
八乳丰、異步組件
在大型應(yīng)用中，我們可能需要將應(yīng)用分割成小一些的代碼塊内贮，并且只在需要的時候才從服務(wù)器加載一個模塊产园。
為了簡化，Vue 允許你以一個工廠函數(shù)的方式定義你的組件贺归，這個工廠函數(shù)會異步解析你的組件定義淆两。Vue 只有在這個組件需要被渲染的時候才會觸發(fā)該工廠函數(shù)，且會把結(jié)果緩存起來供未來重渲染拂酣。例如：
Vue.component('async-example', function (resolve, reject) {
setTimeout(function () {
// 向 `resolve` 回調(diào)傳遞組件定義
resolve({
template: '<div>I am async!</div>'
})
}, 1000)
})
如你所見秋冰，這個工廠函數(shù)會收到一個 resolve 回調(diào)，這個回調(diào)函數(shù)會在你從服務(wù)器得到組件定義的時候被調(diào)用婶熬。
你也可以調(diào)用 reject(reason) 來表示加載失敗剑勾。這里的 setTimeout 是為了演示用的埃撵，如何獲取組件取決于你自己。
一個推薦的做法是將異步組件和 webpack 的 code-splitting 功能一起配合使用：
Vue.component('async-webpack-example', function (resolve) {
// 這個特殊的 `require` 語法將會告訴 webpack
// 自動將你的構(gòu)建代碼切割成多個包虽另，這些包
// 會通過 Ajax 請求加載
require(['./my-async-component'], resolve)
})
你也可以在工廠函數(shù)中返回一個 Promise暂刘，所以把 webpack 2 和 ES2015 語法加在一起，我們可以寫成這樣：
Vue.component(
'async-webpack-example',
// 這個 `import` 函數(shù)會返回一個 `Promise` 對象捂刺。
() => import('./my-async-component')
)
當使用局部注冊組件的時候谣拣，你也可以直接提供一個返回 Promise 的函數(shù)：
new Vue({
// ...
components: {
'my-component': () => import('./my-async-component')
}
})
如果你想實現(xiàn)異步加載組件的功能，提高首屏顯示速度族展，那么可以使用上面例子中的定義組件的方法森缠，也就是：箭頭函數(shù)+import語句！
處理加載狀態(tài)
2.3.0+ 新增
異步組件的工廠函數(shù)也可以返回一個如下格式的對象仪缸，用來靈活定制異步加載過程：
const AsyncComponent = () => ({
// 需要加載的組件 (應(yīng)該是一個 `Promise` 對象)
component: import('./MyComponent.vue'),
// 異步組件加載時使用的組件
loading: LoadingComponent,
// 加載失敗時使用的組件
error: ErrorComponent,
// 展示加載時組件的延時時間贵涵。默認值是 200 (毫秒)
delay: 200,
// 如果提供了超時時間且組件加載也超時了，
// 則使用加載失敗時使用的組件恰画。默認值是：`Infinity`
timeout: 3000
})
注意如果你希望在 Vue Router 的路由組件中使用上述語法的話宾茂，必須使用 Vue Router 2.4.0+ 版本。
九拴还、批量導(dǎo)入組件
很多時候我們會編寫一些類似輸入框或按鈕之類的基礎(chǔ)組件跨晴，它們是相對通用的組件，稱為基礎(chǔ)組件自沧，它們會在更大一些的組件中被頻繁的用到坟奥。
這很容易導(dǎo)致大的組件里有一個很長的導(dǎo)入基礎(chǔ)組件的語句列表，例如：
import BaseButton from './BaseButton.vue'
import BaseIcon from './BaseIcon.vue'
import BaseInput from './BaseInput.vue'
//更多導(dǎo)入
export default {
components: {
BaseButton,
BaseIcon,
BaseInput
}
}
當你的基礎(chǔ)組件很多的時候拇厢，這個過程將非常重復(fù)爱谁、麻煩和無聊。
require.context()
如果你恰好使用了 webpack (或在內(nèi)部使用了 webpack 的 Vue CLI 3+)孝偎，那么就可以使用 require.context 方法批量導(dǎo)入這些組件访敌，然后將它們注冊為全局組件，這樣就可以在任何地方直接使用它們了衣盾，再也不用為導(dǎo)入的事情煩惱了寺旺！
下面是一個示例代碼：
import Vue from 'vue'
import upperFirst from 'lodash/upperFirst'
import camelCase from 'lodash/camelCase'
const requireComponent = require.context(
// 其組件目錄的相對路徑
'./components',
// 是否查詢其子目錄
false,
// 匹配基礎(chǔ)組件文件名的正則表達式
/Base[A-Z]\w+\.(vue|js)$/
)
requireComponent.keys().forEach(fileName => {
// 獲取組件的配置，也就是具體內(nèi)容势决，具體定義阻塑，組件的本身代碼
const componentConfig = requireComponent(fileName)
// 獲取組件的 PascalCase 命名，用來規(guī)范化組件名
const componentName = upperFirst(
camelCase(
// 獲取和目錄深度無關(guān)的文件名
fileName
.split('/')
.pop()
.replace(/\.\w+$/, '')
)
)
// 全局注冊組件
Vue.component(
componentName,
// 如果這個組件選項是通過 `export default` 導(dǎo)出的果复，
// 那么就會優(yōu)先使用 `.default`陈莽，
// 否則回退到使用模塊的根。
componentConfig.default || componentConfig
)
})
記住全局注冊的行為必須在根 Vue 實例 (通過 new Vue) 創(chuàng)建之前發(fā)生。
