7个你应该经常使用的Vue模式
时间：2023-03-16 10:41:24
科技观察
原创|https://medium.com/js-dojo/7-vue-patterns-that-you-should-be-using-more-often-b13cde4d2ae6作者|FotisAdamakis老实说，阅读文档并不是我们大多数人喜欢的事情，但是当使用像Vue这样不断发展的现代前端框架时，每个新版本都会发生很多变化，您以后可能会错过一些东西Introducingnewshiny特征。让我们来看看那些有趣但不太受欢迎的特性，记住它们都是Vue文档的一部分。1.处理加载状态在大型应用中，我们可能需要将应用程序分成更小的块，只在需要时从服务器加载组件。为了使这更容易，Vue允许您将组件定义为异步解析组件定义的工厂函数。Vue只会在需要渲染组件时触发工厂函数，并将结果缓存起来以备将来重新渲染。2.3版本的新特性是异步组件工厂也可以返回如下格式的对象。constAsyncComponent=()=>({//要加载的组件（应该是Promise）component:import('./MyComponent.vue'),//异步组件加载时要使用的组件loading:LoadingComponent,//LoadingComponentusedonfailureerror:ErrorComponent,//显示加载组件前的延迟。默认值：200ms。delay:200,//如果提供并超过超时时间，将显示错误组件。默认值：Infinity。timeout:3000})使用这种方法，您可以选择额外的加载和错误状态、组件获取的延迟和超时等。2.便宜的“v-once”静态组件在Vue中呈现纯HTML元素非常快，但有时您可能有一个包含大量静态内容的组件。在这种情况下，您可以通过向根元素添加一个v-once指令来确保它只被评估一次，然后像这样缓存它。vue.component('terms-of-service',{template:`TermsofService
...alotofstaticcontent...
`})3.递归组件组件可以在自己的模板中递归调用自己，然而，他们只能用name选项调用。递归组件一不小心也会死循环：name:'stack-overflow',template:'
'像上面那个组件会导致“Exceedingthemaximumstacksize”错误，所以要确保递归调用是有条件的（使用v-if最终会是false）4.内联模板当子组件上存在特殊属性inline-template时，组件会使用其内部内容作为其模板，而不是将其视为分布式内容，这样可以更灵活地编写模板。
这些是compiledasthecomponent'sowntemplate.
Notparent'stransclusioncontent.
Scrolldowninsidethissection↓
Iampinnedontothepageat200pxtotheleft。 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:'#dynaminexample',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的上下文功能非常相似。//parentcomponentproviding'foo'varProvider={provide:{foo:'bar'},//...}//childcomponentinjecting'foo'varChild={inject:['foo'],created(){console.log(this.foo)//=>"bar"}//...}本文转载自微信公众号“前端全栈开发”，可关注下方二维码。转载本文请联系前端全栈开发公众号。
