关于vue.js:你应该经常使用的7种Vuejs模式

说实话，浏览文档并不是咱们大多数人喜爱的事件，但当应用像 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"
  }
  // ...
}