这七种Vue模式，你可能会经常用到！但是现在看很有帮助！
时间：2023-03-18 18:29:31
科技观察
老实说，阅读文档并不是我们大多数人喜欢的事情，但是当使用像Vue这样随着每个新版本而变化的不断发展的现代前端框架时，我们很高兴错过了一些后来的新的和有用的功能介绍。今天数玩智就带大家看看那些有趣但不那么热门的功能。请记住，所有这些都是官方Vue文档的一部分。1.处理加载状态在大型项目中，我们可能需要将组件分成小块，只在需要时从服务器加载。为了使这更容易，Vue允许我们将组件定义为异步解析组件定义的工厂函数。Vue只会在组件需要渲染的时候触发工厂函数，并将结果缓存起来，以便以后重新渲染。2.3版本中的新功能，异步组件工厂还可以返回以下格式的对象。constAsyncComponent=()=>({//需要加载的组件（应该是一个`Promise`对象）component:import('./MyComponent.vue'),//加载异步组件加载时使用的组件:LoadingComponent,//加载失败时使用的组件error:ErrorComponent,//显示加载时组件的延迟时间，默认值为200（毫秒）delay:200,//如果提供了超时时间并且组件loadingalsotimesout,//thenUsethecomponenttousewhenloadingfails.默认值为：`Infinity`timeout:3000})使用此方法，我们有其他选项，包括加载和错误状态、组件获取的延迟和超时。2.通过v-once创建低开销的静态组件在Vue中渲染普通的HTML元素非常快，但有时你可能有一个包含大量静态内容的组件。在这种情况下，我们可以在根元素上添加v-once属性来保证内容只计算一次并缓存，像这样：Vue.component('terms-of-service',{template:`TermsofService
...alotofstaticcontent...
`}）更多详情见官网：https://cn.vuejs.org/v2/guide/components-edge-cases.html3.递归组件组件可以在自己的模板中调用自己。但是他们只能通过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时，组件会将其内部的内容作为模板，而不是将其作为分发的内容。这使得模板编写更加灵活。
这些是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:'#dynamynexample',data:function(){return{direction:'left'}}})6.事件&按钮修饰符对于.passive、.capture和.once等事件修饰符，Vue提供了相应的前缀，可以用于on：例如：on:{'!click':this.doThisInCapturingMode,'~keyup':this.doThisOnce,'~!mouseover':this.doThisOnceInCapturingMode}对于所有其他修饰符，私有前缀不是必须的，因为可以在事件处理函数中使用事件方法：7.Vue中的依赖注入，有几种两个组件通信的方式，所有这些方式都有优点和缺点。2.2版中引入的一种新方法是使用Provide/Inject进行依赖注入。这对选项一起使用，允许祖先组件充当其所有后代的依赖注入器，无论组件层次结构有多深，只要它们在同一个父链上。如果您熟悉React，这与React的上下文功能非常相似。//parentcomponentproviding'foo'varProvider={provide:{foo:'bar'},//...}//childcomponentinjecting'foo'varChild={inject:['foo'],created(){console.log(this.foo)//=>"bar"}//...}今天就到这里吧？
