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