[[417060]]

說實(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)容是，異步組件工廠還可以返回以下格式的對(duì)象。

const AsyncComponent = () => ({ 
  // 需要加載的組件 (應(yīng)該是一個(gè) `Promise` 對(duì)象) 
  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 全局注冊(cè)一個(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ò)誤，所以請(qǐng)確保遞歸調(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í)踐，請(qǐng)?jiān)诮M件內(nèi)優(yōu)先選擇 template 選項(xiàng)或 .vue 文件里的一個(gè) 元素來定義模板。

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è)自定義指令，用來通過固定布局將元素固定在頁(yè)面上。我們可以像這樣創(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.事件 & 按鍵修飾符

對(duì)于 .passive、.capture 和 .once 這些事件修飾符，Vue 提供了相應(yīng)的前綴可以用于 on：

例如：

on: { 
  '!click': this.doThisInCapturingMode, 
  '~keyup': this.doThisOnce, 
  '~!mouseover': this.doThisOnceInCapturingMode 
} 

對(duì)于所有其它的修飾符，私有前綴都不是必須的，因?yàn)槟憧梢栽谑录幚砗瘮?shù)中使用事件方法：

7.依賴注入

在Vue中，有幾種方法可以讓兩個(gè)組件進(jìn)行通信，所有這些方法都有優(yōu)點(diǎn)和缺點(diǎn)。2.2版本中引入的一種新方法是使用 Provide/Inject 的依賴注入。

這對(duì)選項(xiàng)一起使用，允許一個(gè)祖先組件作為其所有后代的依賴注入器，無論組件層次有多深，只要它們?cè)谕粋€(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" 
  } 
  // ... 
} 

今天就到這了，就這?