你應(yīng)該經(jīng)常使用的7種Vue模式

作者2021年清明節(jié)拍攝于青島中山公園

說實(shí)話，閱讀文檔并不是我們大多數(shù)人喜歡的事情，但當(dāng)使用像Vue這樣不斷發(fā)展的現(xiàn)代前端框架時(shí)，很多東西會(huì)隨著每一個(gè)新版本的發(fā)布而改變，你可能會(huì)錯(cuò)過一些后來推出的新的閃亮功能。讓我們看一下那些有趣但不那么流行的功能，請(qǐng)記住，所有這些都是Vue文檔的一部分。

1.處理加載狀態(tài)

在大型應(yīng)用程序中，我們可能需要將應(yīng)用程序劃分為更小的塊，只有在需要時(shí)才從服務(wù)器加載組件。為了使這一點(diǎn)更容易，Vue允許你將你的組件定義為一個(gè)工廠函數(shù)，它異步解析你的組件定義。Vue只有在需要渲染組件時(shí)才會(huì)觸發(fā)工廠函數(shù)，并將緩存結(jié)果，以便將來重新渲染。2.3版本的新功能是，異步組件工廠也可以返回一個(gè)如下格式的對(duì)象。

const AsyncComponent = () => ({
  // 要加載的組件（應(yīng)為Promise）
  component: import('./MyComponent.vue'),
  // 異步組件正在加載時(shí)要使用的組件
  loading: LoadingComponent,
  // 加載失敗時(shí)使用的組件
  error: ErrorComponent,
  // 顯示加載組件之前的延遲。默認(rèn)值：200ms。
  delay: 200,
  // 如果提供并超過了超時(shí)，則會(huì)顯示error組件。默認(rèn)值:無窮。
  timeout: 3000
})

通過這種方法，你有額外的加載和錯(cuò)誤狀態(tài)、組件獲取的延遲和超時(shí)等選項(xiàng)。

2.廉價(jià)的“v-once”靜態(tài)組件

在Vue中渲染純HTML元素的速度非?？欤袝r(shí)你可能有一個(gè)包含大量靜態(tài)內(nèi)容的組件。在這種情況下，你可以通過在根元素中添加 v-once 指令來確保它只被評(píng)估一次，然后進(jìn)行緩存，就像這樣。

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

3.遞歸組件

組件可以在自己的模板中遞歸調(diào)用自己，但是，它們只能通過 name 選項(xiàng)來調(diào)用。

如果你不小心，遞歸組件也可能導(dǎo)致無限循環(huán)：

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

像上面這樣的組件會(huì)導(dǎo)致“超過最大堆棧大小”的錯(cuò)誤，所以要確保遞歸調(diào)用是有條件的即(使用 v-if 最終將為 false）

4.內(nèi)聯(lián)模板

當(dāng)特殊屬性 inline-template 存在于一個(gè)子組件上時(shí)，該組件將使用它的內(nèi)部?jī)?nèi)容作為它的模板，而不是將其視為分布式內(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>

5.動(dòng)態(tài)指令參數(shù)

指令參數(shù)可以是動(dòng)態(tài)的。例如，在 v-mydirective:[argument]=“value" 中， argument 可以根據(jù)組件實(shí)例中的數(shù)據(jù)屬性更新！這使得我們的自定義指令可以靈活地在整個(gè)應(yīng)用程序中使用。

這是一條指令，其中可以根據(jù)組件實(shí)例更新動(dòng)態(tài)參數(shù)：

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

例如：

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

對(duì)于所有其他的事件和鍵修飾符，不需要專有的前綴，因?yàn)槟憧梢栽谔幚沓绦蛑惺褂檬录椒ā?/p>

7.依賴注入(Provide/Inject)

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

這對(duì)選項(xiàng)一起使用，允許一個(gè)祖先組件作為其所有子孫的依賴注入器，無論組件層次結(jié)構(gòu)有多深，只要它們?cè)谕粋€(gè)父鏈上。如果你熟悉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"
  }
  // ...
}

粉絲福利

• WebStorm訪談：我們是如何構(gòu)建 JavaScript IDE 的？
• 面向?qū)ο缶幊淌怯?jì)算機(jī)科學(xué)的最大錯(cuò)誤
  
• 13個(gè)頂級(jí)免費(fèi)所見即所得文本編輯器工具Python和JavaScript——這兩種流行的編程語(yǔ)言之間的主要區(qū)別是什么?
• 編程日歷小程序，對(duì)小程序云開發(fā)和生成海報(bào)的實(shí)踐
  
• 一個(gè)付費(fèi) chrome 插件的一生