你應該常用的7種Vue.js模式

說實話，閱讀文檔並非咱們大多數人喜歡的事情，但當使用像Vue這樣不斷髮展的現代前端框架時，不少東西會隨着每個新版本的發佈而改變，你可能會錯過一些後來推出的新的閃亮功能。讓咱們看一下那些有趣但不那麼流行的功能，請記住，全部這些都是Vue文檔的一部分。

1.處理加載狀態

在大型應用程序中，咱們可能須要將應用程序劃分爲更小的塊，只有在須要時才從服務器加載組件。爲了使這一點更容易，Vue容許你將你的組件定義爲一個工廠函數，它異步解析你的組件定義。Vue只有在須要渲染組件時纔會觸發工廠函數，並將緩存結果，以便未來從新渲染。2.3版本的新功能是，異步組件工廠也能夠返回一個以下格式的對象。

const AsyncComponent = () => ({
  // 要加載的組件（應爲Promise）
  component: import('./MyComponent.vue'),
  // 異步組件正在加載時要使用的組件
  loading: LoadingComponent,
  // 加載失敗時使用的組件
  error: ErrorComponent,
  // 顯示加載組件以前的延遲。默認值：200ms。
  delay: 200,
  // 若是提供並超過了超時，則會顯示error組件。默認值:無窮。
  timeout: 3000
})

經過這種方法，你有額外的加載和錯誤狀態、組件獲取的延遲和超時等選項。

2.廉價的「v-once」靜態組件

在Vue中渲染純HTML元素的速度很是快，但有時你可能有一個包含大量靜態內容的組件。在這種狀況下，你能夠經過在根元素中添加 v-once 指令來確保它只被評估一次，而後進行緩存，就像這樣。

Vue.component('terms-of-service', {
  template: `
    <div v-once>
      <h1>Terms of Service</h1>
      ... a lot of static content ...
    </div>
  `
})

3.遞歸組件

組件能夠在本身的模板中遞歸調用本身，可是，它們只能經過 name 選項來調用。

若是你不當心，遞歸組件也可能致使無限循環：

name: 'stack-overflow',
template: '<div><stack-overflow></stack-overflow></div>'

像上面這樣的組件會致使「超過最大堆棧大小」的錯誤，因此要確保遞歸調用是有條件的即(使用 v-if 最終將爲 false）

4.內聯模板

當特殊屬性 inline-template 存在於一個子組件上時，該組件將使用它的內部內容做爲它的模板，而不是將其視爲分佈式內容，這容許更靈活的模板編寫。

<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>

5.動態指令參數

指令參數能夠是動態的。例如，在 v-mydirective:[argument]=「value" 中， argument 能夠根據組件實例中的數據屬性更新！這使得咱們的自定義指令能夠靈活地在整個應用程序中使用。

這是一條指令，其中能夠根據組件實例更新動態參數：

<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提供了可與 on 一塊兒使用的前綴：

例如：

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

對於全部其餘的事件和鍵修飾符，不須要專有的前綴，由於你能夠在處理程序中使用事件方法。

7.依賴注入(Provide/Inject)

有幾種方法可讓兩個組件在 Vue 中進行通訊，它們各有優缺點。在2.2版本中引入的一種新方法是使用Provide/Inject的依賴注入。

這對選項一塊兒使用，容許一個祖先組件做爲其全部子孫的依賴注入器，不管組件層次結構有多深，只要它們在同一個父鏈上。若是你熟悉React，這與React的上下文功（context）能很是類似。

// parent component providing 'foo'
var Provider = {
  provide: {
    foo: 'bar'
  },
  // ...
}

// child component injecting 'foo'
var Child = {
  inject: ['foo'],
  created () {
    console.log(this.foo) // => "bar"
  }
  // ...
}