这7个Vue模式，你可能会经常用到！但是现在看很有帮助！
有梦想，有干货，微信搜索【大千世界】关注这位凌晨还在洗碗的洗碗智者。本文已收录到GitHubhttps://github.com/qq449245884/xiaozhi，里面有完整的测试站点、资料和我的一线厂商访谈系列文章。说实话，阅读文档并不是我们大多数人喜欢的事情，但是当使用像Vue这样随着每个新版本而变化的不断发展的现代前端框架时，我们一直很怀念地错过了一些新的后来出来了。和有用的功能。今天数玩智就带大家看看那些有趣但不那么热门的功能。请记住，所有这些都是官方Vue文档的一部分。1.处理加载状态在大型项目中，我们可能需要将组件分成小块，只在需要时从服务器加载。为了使这更容易，Vue允许我们将组件定义为异步解析组件定义的工厂函数。Vue只会在组件需要渲染的时候触发工厂函数，并将结果缓存起来，以便以后重新渲染。2.3版本中的新功能，异步组件工厂还可以返回以下格式的对象。constAsyncComponent=()=>({//需要加载的组件（应该是一个`Promise`对象）component:import('./MyComponent.vue'),//加载异步组件时使用的组件loading:LoadingComponent,//加载失败时使用的组件error:ErrorComponent,//显示组件加载时的延迟时间，默认为200（毫秒）delay:200,//如果提供超时时间，组件加载也会超时，//然后使用加载失败时使用的组件。默认值为：`Infinity`timeout:3000})使用此方法，我们有其他选项，包括加载和错误状态、组件获取的延迟和超时。2.通过v-once创建低开销的静态组件在Vue中渲染普通的HTML元素非常快，但有时你可能有一个包含大量静态内容的组件。在这种情况下，我们可以在根元素上添加v-once属性来保证这些内容只计算一次并缓存起来，像这样：Vue.component('terms-of-service',{template:`TermsofService
...一大堆静态内容...
`})详情见官网：https://cn.vuejs.org/v2/指南...3。递归组件组件可以在自己的模板中调用自己。但是他们只能通过name选项来做到这一点：name:'unique-name-of-my-component'当你使用Vue.component全局注册组件时，全局ID将自动设置为组件选项的名称.Vue.component('unique-name-of-my-component',{//...})一不小心，递归组件可能会死循环：name:'stack-overflow',template:'
'类似上面的组件会导致“超出最大堆栈大小”错误，因此请确保递归调用是有条件的（例如使用v-if）。4.内联模板当子组件上出现特殊属性inline-template时，组件会将其内部的内容作为模板，而不是将其作为分发的内容。这使得模板编写更加灵活。
链接模板需要定义在Vue所属的DOM元素内部。但是，内联模板会使模板的范围更难理解。因此，作为最佳实践，请先在组件中选择模板选项，或者在.vue文件中选择元素来定义模板。5.动态指令参数指令的参数可以是动态的。例如，在v-mydirective:[argument]="value"中，argument参数可以根据组件实例数据进行更新！这允许自定义指令在应用程序中灵活使用。例如，您想创建一个自定义指令来固定页面上具有固定布局的元素。我们可以创建一个自定义指令，通过指令值更新垂直像素值，如下所示："200">我固定在页面左侧200像素处。 Vue.directive('pin',{bind:function(el,binding,vnode){el.style.position='固定'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:修饰符前缀.passive&.capture!.once~.capture.onceor.once.capture~!例如：on:{'!click':this.doThisInCapturingMode,'~keyup':this.doThisOnce,'~!mouseover':this.doThisOnceInCapturingMode}对于所有其他修饰符，私有前缀不是必需的，因为你可以在事件处理器中使用事件方法：相当于修饰符handler.stopevent.stopPropagation()中的操作。preventevent.preventDefault().selfif(event.target!==event.currentTarget)返回键：.enter,.13if(event.keyCode!==13)return(对于其他键修饰符，可以将13改成其他键码)modifierkeys:.ctrl,.alt,.shift,.metaif(!event.ctrlKey)return(changectrlKey修改为altKey,shiftKey或metaKey分别）7.依赖注入在Vue中，两个组件之间有多种通信方式，各有优缺点。2.2版本引入的一个新方法是使用Provide/Inject进行依赖注入。这对选项一起使用，允许祖先组件充当其所有后代的依赖注入器，无论组件层次结构有多深，只要它们在同一个父链上。如果您熟悉React，这与React的上下文功能非常相似。//父组件提供'foo'varProvider={provide:{foo:'bar'},//...}//子组件注入'foo'varChild={inject:['foo'],created(){console.log(this.foo)//=>"bar"}//...}今天就这些了，是吗？~最后，我是个保龄球手，因为LOL的疫情只能宅在家里。代码部署后可能存在的bug，无法实时获知。事后为了解决这些bug，花费了大量的时间在日志调试上。顺便推荐一个好用的bug监控工具Fundebug。交流文章每周更新。可以微信搜索“大千世界”阅读即时更新（比博文早一两篇）。本文已收录到GitHubhttps://github.com/qq449245884/xiaozhi。我的文档发表了很多，欢迎Star和完善，可以参考考试中心面试复习，关注公众号，后台会回复福利，福利可以看到，你知道。
