簡單復(fù)習(xí)下7個(gè)常用的 Vue 模式
說實(shí)話，閱讀文檔并不是我們大多數(shù)人喜歡的事情，但是當(dāng)使用像Vue這樣不斷發(fā)展的現(xiàn)代前端框架時(shí)，每一個(gè)新版本都會(huì)有所變化，我們很有可愛已經(jīng)錯(cuò)過了一些后來推出的新且好用的功能。
今天，刷碗智帶大家來看看那些有趣但不那么流行的功能。記住，所有這些都是官方Vue文檔的一部分。
1. 處理加載狀態(tài)
在大型項(xiàng)目中，我們可能需要將組件分成小塊，只有在需要時(shí)才從服務(wù)器上加載。為了更容易做到這一點(diǎn)，Vue允許我們將組件定義為一個(gè)工廠函數(shù)，異步地解析組件定義。Vue只會(huì)在組件需要渲染的時(shí)候觸發(fā)工廠函數(shù)，并把結(jié)果緩存起來以備后面的重新渲染。2.3版的新內(nèi)容是，異步組件工廠還可以返回以下格式的對象。
const AsyncComponent = () => ({
// 需要加載的組件 (應(yīng)該是一個(gè) `Promise` 對象)
component: import('./MyComponent.vue'),
// 異步組件加載時(shí)使用的組件
loading: LoadingComponent,
// 加載失敗時(shí)使用的組件
error: ErrorComponent,
// 展示加載時(shí)組件的延時(shí)時(shí)間。默認(rèn)值是 200 (毫秒)
delay: 200,
// 如果提供了超時(shí)時(shí)間且組件加載也超時(shí)了，
// 則使用加載失敗時(shí)使用的組件。默認(rèn)值是：`Infinity`
timeout: 3000
})
使用這種方法，我們有額外的選項(xiàng)，包括加載和錯(cuò)誤狀態(tài)、組件獲取的延遲和超時(shí)。
2.通過 v-once 創(chuàng)建低開銷的靜態(tài)組件
渲染普通的 HTML 元素在 Vue 中是非常快速的，但有的時(shí)候你可能有一個(gè)組件，這個(gè)組件包含了大量靜態(tài)內(nèi)容。在這種情況下，我們可以在根元素上添加 v-once attribute 以確保這些內(nèi)容只計(jì)算一次然后緩存起來，就像這樣：
Vue.component('terms-of-service', {
template: `
<div v-once>
<h1>Terms of Service</h1>
... a lot of static content ...
</div>
`
})
更多詳細(xì)內(nèi)容看官網(wǎng)：https://cn.vuejs.org/v2/guide/components-edge-cases.html
3.遞歸組件
組件是可以在它們自己的模板中調(diào)用自身的。不過它們只能通過 name 選項(xiàng)來做這件事：
name: 'unique-name-of-my-component'
當(dāng)你使用 Vue.component 全局注冊一個(gè)組件時(shí)，這個(gè)全局的 ID 會(huì)自動(dòng)設(shè)置為該組件的 name 選項(xiàng)。
Vue.component('unique-name-of-my-component', {
// ...
})
稍有不慎，遞歸組件就可能導(dǎo)致無限循環(huán)：
name: 'stack-overflow',
template: '<div><stack-overflow></stack-overflow></div>'
類似上述的組件將會(huì)導(dǎo)致“max stack size exceeded”錯(cuò)誤，所以請確保遞歸調(diào)用是條件性的 (例如使用一個(gè)最終會(huì)得到 false 的 v-if)。
4.內(nèi)聯(lián)模板
當(dāng) inline-template 這個(gè)特殊的 attribute 出現(xiàn)在一個(gè)子組件上時(shí)，這個(gè)組件將會(huì)使用其里面的內(nèi)容作為模板，而不是將其作為被分發(fā)的內(nèi)容。這使得模板的撰寫工作更加靈活。
<my-component inline-template>
<div>
<p>These are compiled as the component's own template.</p>
<p>Not parent's transclusion content.</p>
</div>
</my-component>
內(nèi)聯(lián)模板需要定義在 Vue 所屬的 DOM 元素內(nèi)。
不過，
inline-template會(huì)讓模板的作用域變得更加難以理解。所以作為最佳實(shí)踐，請?jiān)诮M件內(nèi)優(yōu)先選擇template選項(xiàng)或 .vue 文件里的一個(gè)<template>元素來定義模板。
5. 動(dòng)態(tài)指令參數(shù)
指令的參數(shù)可以是動(dòng)態(tài)的。例如，在 v-mydirective:[argument]="value" 中，argument參數(shù)可以根據(jù)組件實(shí)例數(shù)據(jù)進(jìn)行更新！這使得自定義指令可以在應(yīng)用中被靈活使用。
例如你想要?jiǎng)?chuàng)建一個(gè)自定義指令，用來通過固定布局將元素固定在頁面上。我們可以像這樣創(chuàng)建一個(gè)通過指令值來更新豎直位置像素值的自定義指令：
<div id="dynamicexample">
<h3>Scroll down inside this section ↓</h3>
<p v-pin:[direction]="200">I am pinned onto the page at 200px to the left.</p>
</div>
Vue.directive('pin', {
bind: function (el, binding, vnode) {
el.style.position = 'fixed'
var s = (binding.arg == 'left' ? 'left' : 'top')
el.style[s] = binding.value + 'px'
}
})
new Vue({
el: '#dynamicexample',
data: function () {
return {
direction: 'left'
}
}
})
6.事件 & 按鍵修飾符
對于 .passive、.capture 和 .once 這些事件修飾符，Vue 提供了相應(yīng)的前綴可以用于 on：
| 修飾符 | 前綴 |
|---|---|
| .passive | & |
| .capture | ! |
| .once | ~ |
| .capture.once 或.once.capture | ~! |
例如：
on: {
'!click': this.doThisInCapturingMode,
'~keyup': this.doThisOnce,
'~!mouseover': this.doThisOnceInCapturingMode
}
對于所有其它的修飾符，私有前綴都不是必須的，因?yàn)槟憧梢栽谑录幚砗瘮?shù)中使用事件方法：
| 修飾符 | 處理函數(shù)中的等價(jià)操作 |
|---|---|
.stop | event.stopPropagation() |
.prevent | event.preventDefault() |
.self | if (event.target !== event.currentTarget) return |
按鍵：.enter, .13 | if (event.keyCode !== 13) return (對于別的按鍵修飾符來說，可將 13 改為另一個(gè)按鍵碼) |
修飾鍵：.ctrl, .alt, .shift, .meta | if (!event.ctrlKey) return (將 ctrlKey 分別修改為 altKey、shiftKey 或者 metaKey) |
7.依賴注入
在Vue中，有幾種方法可以讓兩個(gè)組件進(jìn)行通信，所有這些方法都有優(yōu)點(diǎn)和缺點(diǎn)。2.2版本中引入的一種新方法是使用 Provide/Inject 的依賴注入。
這對選項(xiàng)一起使用，允許一個(gè)祖先組件作為其所有后代的依賴注入器，無論組件層次有多深，只要它們在同一個(gè)父鏈上。如果你熟悉React，這與React的上下文功能非常相似。
// parent component providing 'foo'
var Provider = {
provide: {
foo: 'bar'
},
// ...
}
// child component injecting 'foo'
var Child = {
inject: ['foo'],
created () {
console.log(this.foo) // => "bar"
}
// ...
}
今天就到這了，就這？
~完，我是刷碗智，疫情只能在家 LoL 了。