乐趣区

关于前端:这7个-Vue-模式可能你经常用但现在看对你很有帮助

jiezi

有幻想，有干货，微信搜寻 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。

本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试残缺考点、材料以及我的系列文章。

说实话，浏览文档并不是咱们大多数人喜爱的事件，然而当应用像 Vue 这样一直倒退的古代前端框架时，每一个新版本都会有所变动，咱们很有可恶曾经错过了一些起初推出的新且好用的性能。

明天，刷碗智带大家来看看那些乏味但不那么风行的性能。记住，所有这些都是官网 Vue 文档的一部分。

1. 解决加载状态

在大型项目中，咱们可能须要将组件分成小块，只有在须要时才从服务器上加载。为了更容易做到这一点，Vue 容许咱们将组件定义为一个工厂函数，异步地解析组件定义。Vue 只会在组件须要渲染的时候触发工厂函数，并把后果缓存起来以备前面的从新渲染。2.3 版的新内容是，异步组件工厂还能够返回以下格局的对象。

const AsyncComponent = () => ({// 须要加载的组件 (应该是一个 `Promise` 对象)
  component: import('./MyComponent.vue'),
  // 异步组件加载时应用的组件
  loading: LoadingComponent,
  // 加载失败时应用的组件
  error: ErrorComponent,
  // 展现加载时组件的延时工夫。默认值是 200 (毫秒)
  delay: 200,
  // 如果提供了超时工夫且组件加载也超时了，// 则应用加载失败时应用的组件。默认值是：`Infinity`
  timeout: 3000
})

应用这种办法，咱们有额定的选项，包含加载和谬误状态、组件获取的提早和超时。

2. 通过 v-once 创立低开销的动态组件

渲染一般的 HTML 元素在 Vue 中是十分疾速的，但有的时候你可能有一个组件，这个组件蕴含了大量动态内容。在这种状况下，咱们能够在根元素上增加 v-once attribute 以确保这些内容只计算一次而后缓存起来，就像这样：

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

更多具体内容看官网：https://cn.vuejs.org/v2/guide…

3. 递归组件

组件是能够在它们本人的模板中调用本身的。不过它们只能通过 name 选项来做这件事：

name: 'unique-name-of-my-component'

当你应用 Vue.component 全局注册一个组件时，这个全局的 ID 会主动设置为该组件的 name 选项。

Vue.component('unique-name-of-my-component', {// ...})

稍有不慎，递归组件就可能导致有限循环：

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

相似上述的组件将会导致 “max stack size exceeded” 谬误，所以请确保递归调用是条件性的 (例如应用一个最终会失去 false 的 v-if)。

4. 内联模板

当 inline-template 这个非凡的 attribute 呈现在一个子组件上时，这个组件将会应用其外面的内容作为模板，而不是将其作为被散发的内容。这使得模板的撰写工作更加灵便。

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

内联模板须要定义在 Vue 所属的 DOM 元素内。

不过，inline-template 会让模板的作用域变得更加难以了解。所以作为最佳实际，请在组件内优先选择 template 选项或 .vue 文件里的一个 <template> 元素来定义模板。

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：

修饰符 前缀
.passive &
.capture !
.once ~
.capture.once 或.once.capture ~!

例如：

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

对于所有其它的修饰符，公有前缀都不是必须的，因为你能够在事件处理函数中应用事件办法：

修饰符 处理函数中的等价操作
.stop event.stopPropagation()
.prevent event.preventDefault()
.self if (event.target !== event.currentTarget) return
按键：.enter, .13 if (event.keyCode !== 13) return (对于别的按键修饰符来说，可将 13 改为另一个按键码)
润饰键：.ctrl, .alt, .shift, .meta if (!event.ctrlKey) return (将 ctrlKey 别离批改为 altKey、shiftKey 或者 metaKey)

7. 依赖注入

在 Vue 中，有几种办法能够让两个组件进行通信，所有这些办法都有长处和毛病。2.2版本中引入的一种新办法是应用 Provide/Inject 的依赖注入。

这对选项一起应用，容许一个先人组件作为其所有后辈的依赖注入器，无论组件档次有多深，只有它们在同一个父链上。如果你相熟 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 了。

代码部署后可能存在的 BUG 没法实时晓得，预先为了解决这些 BUG，花了大量的工夫进行 log 调试，这边顺便给大家举荐一个好用的 BUG 监控工具 Fundebug。

交换

文章每周继续更新，能够微信搜寻「大迁世界」第一工夫浏览和催更（比博客早一到两篇哟），本文 GitHub https://github.com/qq449245884/xiaozhi 曾经收录，整顿了很多我的文档，欢送 Star 和欠缺，大家面试能够参照考点温习，另外关注公众号，后盾回复 福利，即可看到福利，你懂的。

退出移动版