vue中有趣的几个功能
vue中有趣的几个功能
老实说，我们大多数人都不太喜欢阅读文档，但是当使用像 Vue 这样不断发展的现代前端框架时，每个新版本都会发生很多变化，我们可能会错过一些后来推出的新的、闪亮的功能。让我们来看看那些有趣但不那么受欢迎的功能。所有这些都是 Vue 官方文档的一部分。
1.处理加载状态
在大型应用程序中，我们可能需要将应用程序分成更小的块，并且仅在需要时从服务器加载组件。为了使这更容易，Vue 允许我们将组件定义为定义的工厂函数，然后异步解析组件。Vue 仅在组件需要渲染时才会触发工厂函数，并缓存结果以供将来重新渲染。从 2.3 版本开始，异步组件工厂还可以返回以下格式的对象：
const AsyncComponent = () => ({
// 异步加载组件（一个promise）
component: import('./MyComponent.vue'),
// 加载异步组件时的中间状态组件
loading: LoadingComponent,
// 异步组件加载失败时展示的状态
error: ErrorComponent,
// 延迟多久展示loading状态
delay: 200,
// error组件在多久会展示 默认: Infinity.
timeout: 3000
})
通过这种方法，我们可以选择加载和错误状态、组件获取延迟和超时等附加选项。
2. 带有“v-once”的廉价静态组件
在 Vue 中渲染纯 HTML 元素非常快，但有时我们可能有一个包含大量静态内容的组件。在这些情况下，我们可以确保它仅被计算一次，然后通过将指令v-once添加到根元素来缓存，如下所示：
Vue.component('terms-of-service', {
template: `
标题
静态文本
`
})
3. 递归组件
组件可以在自己的模板中递归调用自己。但是，他们只能通过name属性来做到这一点。
如果我们不小心，递归组件也可能导致无限循环：
name: 'stack-overflow',
template: '像上面这样的组件将导致“超出最大堆栈大小”错误，因此需要确保递归调用是有条件的（即使用v-if并最终的结果时false的情况）。
4.内联模板
当子组件上存在特殊属性inline-template时，该组件将使用其内部内容作为其模板，而不是将其视为分布式内容。这允许更灵活的模板创作。
<my-component inline-template>
<div>
<p>会被编译成子组件内部的模板p>
<p>而不是父组件中的内容p>
div>
my-component>
不过内联模板是
Vue 3已弃用的功能之一，我们不应该使用它们。使用script标签或slot是替代方案。
5.动态指令参数
指令参数可以是动态的。例如，在 v-mydirective:[argument]="value"中，argument可以根据我们的组件实例中的数据属性进行更新！这使得我们的自定义指令可以在整个应用程序中灵活使用。
这是一个可以为每个组件实例更新动态参数的指令：
<div id="dynamicexample">
<h3>向下滚动</h3>
<p v-pin:[direction]="200">在页面左侧200px</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
}
对于所有其他事件和键修饰符，不需要专有前缀，因为我们可以在处理程序中使用事件方法：
7.依赖注入（Provide/Inject）
有多种方法可以让两个组件在 Vue 中进行通信，这些方法各有利弊。2.2 版本中引入的一种新方法是通过 Provide/Inject 使用依赖注入。
这对选项一起使用，允许祖先组件充当其所有后代的依赖注入器，无论组件层次结构有多深，只要它们位于同一父链中即可。如果我们熟悉 React，这与React 的上下文功能非常相似。
// 父组件提供foo
var Provider = {
provide: {
foo: 'bar'
},
// ...
}
// 子组件注入foo
var Child = {
inject: ['foo'],
created () {
console.log(this.foo) // => "bar"
}
// ...
}