专栏首页终身学习者这 10 个技巧让你成为一个更好的 Vue 开发者

这 10 个技巧让你成为一个更好的 Vue 开发者

作者:Simon Holdorf 译者:前端小智 来源:telerik

简介

我比较喜欢使用 Vue 来开发,所以有时会深入研究其功能和特性。 通过这篇文章,向你们介绍十个很酷的窍门和技巧,以帮助大家成为更好的 Vue 开发者。

插槽语法更漂亮

随着Vue 2.6的推出,已经引入了插槽的简写方式,之前简写可用于事件(例如,@click表示v-on:click事件)或冒号表示方式用于绑定(:src)。 例如,如果有一个表格组件,则可以按以下方式使用此功能:

$on(‘hook:’)

如果要在createdmounted方法中定义自定义事件侦听器或第三方插件,并且需要在beforeDestroy方法中将其删除以免引起任何内存泄漏,则可以使用此功能。 使用$on(‘hook:’)方法,我们可以仅使用一种生命周期方法(而不是两种)来定义/删除事件。

prop 验证

你可能已经知道可以将props验证为原始类型,例如字符串,数字甚至对象。 我们还可以使用自定义验证器,例如,如果要针对字符串列表进行验证:

动态指令参数

Vue 2.6 的最酷功能之一是可以将指令参数动态传递给组件。 假设有一个按钮组件,并且在某些情况下想监听单击事件,而在其他情况下想监听双击事件。 这就是动态指令派上用场的地方了:

重用同一路由的组件

有时,我们不同路由共用某些时,如果在这些路由之间切换,则默认情况下,共享组件将不会重新渲染,因为Vue 出于性能原因会重用该组件。 但是,如果我们仍然希望重新渲染这些组件,则可以通过在路由器视图组件中提供:key属性来实现重新渲染。

从父类到子类的所有 props

这是一个非常酷的功能,可将所有prop从父组件传递到子组件。 如果我们有另一个组件的包装器组件,这将特别方便。 因为,我们不必一个一个将prop传递给子组件,而是一次传递所有prop

上面的可以代替下面的做法

从父类到子类的所有事件侦听器

如果子组件不在父组件的根目录下,则可以将所有事件侦听器从父组件传递到子组件,如下所示:

如果子组件位于其父组件的根目录下,则默认情况下它将获得那些组件,因此不需要此小技巧。

$createElement

默认情况下,每个Vue实例都可以访问$createElement方法来创建和返回虚拟节点。例如,可以利用它在可以通过v-html指令传递的方法中使用标记。在函数组件中,可以将此方法作为渲染函数中的第一个参数访问。

使用 JSX

由于Vue CLI 3默认支持使用JSX,因此现在(如果愿意)我们可以使用JSX编写代码(例如,可以方便地编写函数组件)。 如果尚未使用Vue CLI 3,则可以使用babel-plugin-transform-vue-jsx获得JSX支持。

自定义 v-model

默认情况下,v-model@input事件监听器和:value props上的语法糖。但是,我们可以在Vue组件中指定一个模型属性,以定义使用什么事件和值

总结

希望这些窍门和技巧对你有所帮助,如果你也知道哪些技巧,欢迎留言。

代码部署后可能存在的BUG没法实时知道,事后为了解决这些BUG,花了大量的时间进行log 调试,这边顺便给大家推荐一个好用的BUG监控工具 Fundebug

原文:https://www.telerik.com/blogs...

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Vue 中,如何将函数作为 props 传递给组件

    Vue 新手经常问的一个常见问题。可以将字符串、数组、数字和对象作为props传递。但是你能把一个函数当作一个props来传递吗?

    前端小智@大迁世界
  • 对于组件的可重用性,大佬给出来6个级别的见解,一起过目一下!

    我们所有人都希望编写更少的代码,同时也要做更多的事情。为了实现这一点,我们构建了组件,以便可以多次重用它们。

    前端小智@大迁世界
  • 高级 Vue 技巧:控制父类的 slot

    最近一位同事问我这个问题,答案很简单:可以的。但我的解决方案可能和你想的完全不一样,这是涉及一个棘手的Vue架构问题,但也是一个非常有趣的问题。

    前端小智@大迁世界
  • Vue全局组件和局部组件及组件传值

    就是说它们在注册之后可以用在任何新创建的 Vue 根实例 (new Vue) 的模板中。下面是使用在root根示例下的first-component全局组件: ...

    _kyle
  • 「vue基础」手把手教你编写 Vue 组件(上)

    首先我们来看一个简单的例子,比如我们有一个头像的组件(avatar)用来展示用户的头像,我们只需要创建一次,我们就可以随意将此组件添加至项目需要用到的地方,十分...

    前端达人
  • 微信小程序的自定义组件(入门)

    我们知道,在我们设计微信小程序时,我们经常会用到开发者工具中提供的许多标签,例如:

    面向对象思考
  • vue.js: 自定义事件之—— 子组件修改父组件的值

    这里,相对本案例,父组件定义为Second-module,对应的子组件是Three-module

    xing.org1^
  • Vue.js 教程:构建一个特斯拉汽车余电计算器

    这篇教程关注的是全新的汽车驾驶体验。电动汽车已经是公认的未来趋势。但很多人都关心的一个问题是,电车充满电后究竟可以跑多远?行驶速度、气温和轮毂尺寸会对续航里程有...

    深度学习与Python
  • VUE组件传值案例讲解

    好吧我承认我疏忽了,我一直以为我的博客是将vue的一些常见操作全部写完了的,但是直到我写组件的时候突然想起来看一下自己写的博客是不是有问题的才发现,组件之间的传...

    何处锦绣不灰堆
  • 抽象组件库的可行性讨论

    首先这篇博文不是教程也不是研究技术技巧,这只是我对目前我正在着手写的一个组件库的一些想法,以及我对当前主流的这些css框架的一些看法。 当前的一些主流css框架...

    练小习

扫码关注云+社区

领取腾讯云代金券