文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

你应该经常使用的7种Vue模式

2024-12-03 07:29

关注

原文|https://medium.com/js-dojo/7-vue-patterns-that-you-should-be-using-more-often-b13cde4d2ae6

作者|Fotis Adamakis

说实话,阅读文档并不是我们大多数人喜欢的事情,但当使用像Vue这样不断发展的现代前端框架时,很多东西会随着每一个新版本的发布而改变,你可能会错过一些后来推出的新的闪亮功能。让我们看一下那些有趣但不那么流行的功能,请记住,所有这些都是Vue文档的一部分。

1.处理加载状态

在大型应用程序中,我们可能需要将应用程序划分为更小的块,只有在需要时才从服务器加载组件。为了使这一点更容易,Vue允许你将你的组件定义为一个工厂函数,它异步解析你的组件定义。Vue只有在需要渲染组件时才会触发工厂函数,并将缓存结果,以便将来重新渲染。2.3版本的新功能是,异步组件工厂也可以返回一个如下格式的对象。

  1. const AsyncComponent = () => ({ 
  2.   // 要加载的组件(应为Promise) 
  3.   component: import('./MyComponent.vue'), 
  4.   // 异步组件正在加载时要使用的组件 
  5.   loading: LoadingComponent, 
  6.   // 加载失败时使用的组件 
  7.   error: ErrorComponent, 
  8.   // 显示加载组件之前的延迟。默认值:200ms。 
  9.   delay: 200, 
  10.   // 如果提供并超过了超时,则会显示error组件。默认值:无穷。 
  11.   timeout: 3000 
  12. }) 

通过这种方法,你有额外的加载和错误状态、组件获取的延迟和超时等选项。

2.廉价的“v-once”静态组件

在Vue中渲染纯HTML元素的速度非常快,但有时你可能有一个包含大量静态内容的组件。在这种情况下,你可以通过在根元素中添加 v-once 指令来确保它只被评估一次,然后进行缓存,就像这样。

  1. Vue.component('terms-of-service', { 
  2.   template: ` 
  3.      
  4.        
  5.       ... a lot of static content ... 
  6.     
 
  •   ` 
  • }) 
  • 3.递归组件

    组件可以在自己的模板中递归调用自己,但是,它们只能通过 name 选项来调用。

    如果你不小心,递归组件也可能导致无限循环:

    1. name'stack-overflow'
    2. template: '
      '
       

    像上面这样的组件会导致“超过最大堆栈大小”的错误,所以要确保递归调用是有条件的即(使用 v-if 最终将为 false)

    4.内联模板

    当特殊属性 inline-template 存在于一个子组件上时,该组件将使用它的内部内容作为它的模板,而不是将其视为分布式内容,这允许更灵活的模板编写。

    1.  
    2.   
       
    3.     

      These are compiled as the component's own template.

       
    4.     

      Not parent's transclusion content.

       
    5.   
     
  •  
  • 5.动态指令参数

    指令参数可以是动态的。例如,在 v-mydirective:[argument]=“value" 中, argument 可以根据组件实例中的数据属性更新!这使得我们的自定义指令可以灵活地在整个应用程序中使用。

    这是一条指令,其中可以根据组件实例更新动态参数:

    1. "dynamicexample"
    2.   

      Scroll down inside this section ↓

       
    3.   "200">I am pinned onto the page at 200px to the left.

       
    4.  
    5. Vue.directive('pin', { 
    6.   bind: function (el, binding, vnode) { 
    7.     el.style.position = 'fixed' 
    8.     var s = (binding.arg == 'left' ? 'left' : 'top'
    9.     el.style[s] = binding.value + 'px' 
    10.   } 
    11. }) 
    12.  
    13. new Vue({ 
    14.   el: '#dynamicexample'
    15.   data: function () { 
    16.     return { 
    17.       direction: 'left' 
    18.     } 
    19.   } 
    20. }) 

    6.事件和键修饰符

    对于 .passive、.capture 和 .once 事件修饰符,Vue提供了可与 on 一起使用的前缀:

    例如:

    1. on: { 
    2.   '!click': this.doThisInCapturingMode, 
    3.   '~keyup': this.doThisOnce, 
    4.   '~!mouseover': this.doThisOnceInCapturingMode 

    对于所有其他的事件和键修饰符,不需要专有的前缀,因为你可以在处理程序中使用事件方法。

    7.依赖注入(Provide/Inject)

    有几种方法可以让两个组件在 Vue 中进行通信,它们各有优缺点。在2.2版本中引入的一种新方法是使用Provide/Inject的依赖注入。

    这对选项一起使用,允许一个祖先组件作为其所有子孙的依赖注入器,无论组件层次结构有多深,只要它们在同一个父链上。如果你熟悉React,这与React的上下文功(context)能非常相似。

    1. // parent component providing 'foo' 
    2. var Provider = { 
    3.   provide: { 
    4.     foo: 'bar' 
    5.   }, 
    6.   // ... 
    7.  
    8. // child component injecting 'foo' 
    9. var Child = { 
    10.   inject: ['foo'], 
    11.   created () { 
    12.     console.log(this.foo) // => "bar" 
    13.   } 
    14.   // ... 

    本文转载自微信公众号「前端全栈开发者」,可以通过以下二维码关注。转载本文请联系前端全栈开发者公众号。

     

    来源:前端全栈开发者内容投诉

    免责声明:

    ① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

    ② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

    软考中级精品资料免费领

    • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

      难度     813人已做
      查看
    • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

      难度     354人已做
      查看
    • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

      难度     318人已做
      查看
    • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

      难度     435人已做
      查看
    • 2024年上半年系统架构设计师考试综合知识真题

      难度     224人已做
      查看

    相关文章

    发现更多好内容

    猜你喜欢

    AI推送时光机
    位置:首页-资讯-后端开发
    咦!没有更多了?去看看其它编程学习网 内容吧
    首页课程
    资料下载
    问答资讯