你应该经常使用的7种Vue.js模式
您应该经常使用的7个Vue.js模式在新版本的发布之间发生变化，您可能会错过稍后出现的一些新的闪亮功能。让我们来看看那些有趣但不太受欢迎的特性，记住它们都是Vue文档的一部分。1.处理加载状态在大型应用中，我们可能需要将应用程序分成更小的块，只在需要时从服务器加载组件。为了使这更容易，Vue允许您将组件定义为异步解析组件定义的工厂函数。Vue只会在需要渲染组件时触发工厂函数，并将结果缓存起来以备将来重新渲染。2.3版本的新特性是异步组件工厂也可以返回如下格式的对象。constAsyncComponent=()=>({//要加载的组件（应该是Promise）component:import('./MyComponent.vue'),//加载异步组件时使用的组件loading:LoadingComponent,//组件usewhenloadingfailserror:ErrorComponent,//显示加载组件前的延迟。默认：200ms。delay:200,//如果提供并超过超时，将显示错误组件。默认：无限。超时：3000})使用这种方法，您可以选择额外的加载和错误状态、组件获取的延迟和超时等。2.便宜的“v-once”静态组件在Vue中渲染纯HTML元素非常快，但有时您可能有具有大量静态内容的组件。在这种情况下，您可以通过向根元素添加一个v-once指令来确保它只被评估一次，然后像这样缓存它。看。component('terms-of-service',{template:`TermsofService
...很多静态内容...
`})3.递归组件组件可以在自己的模板中递归调用自己，但是只能通过name选项调用。递归组件一不小心也会死循环：name:'stack-overflow',template:'
'像上面那个组件会导致“Exceedingthemaximumstacksize”错误，所以要确保递归调用是有条件的（使用v-if最终会是false）4.内联模板当子组件上存在特殊属性inline-template时，组件会使用其内部内容作为其模板，而不是将其视为分布式内容，这样可以更灵活地编写模板。
这些被编译为组件自己的模板。
不是父组件的嵌入内容。
在本节中向下滚动↓
我固定在页面左侧200像素处。 Vue.directive('pin',{bind:function(el,binding,vnode){el.style.position='fixed'vars=(binding.arg=='left'?'left':'top')el.style[s]=binding.value+'px'}})newVue({el:'#dynamexample',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的上下文功能非常相似。//父组件提供'foo'varProvider={provide:{foo:'bar'},//...}//子组件注入'foo'varChild={inject:['foo'],created(){console.log(this.foo)//=>"bar"}//...}
