2020年的12个Vue.js开发技巧和窍门

我真的很喜欢使用Vue.js,每次使用框架时,我都会喜欢深入研究其功能和特性。通过这篇文章,我向你介绍了十个很酷的提示和技巧,你可能尚未意识到这些技巧和窍门,以帮助你成为更好的Vue开发人员。

更漂亮的插槽语法

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

<template>
  ...
    <my-table>
    <template #row={ item }>
            /* 一些内容,你可以在这里自由使用“item” */
        </template>
  </my-table>  
    ...
</template>

$on(‘hook:’) 可以帮助你简化代码

删除事件监听器是一种常见的最佳实践,因为它有助于避免内存泄露并防止事件冲突。

如果你想在 createdmounted 的钩子中定义自定义事件监听器或第三方插件,并且需要在 beforeDestroy 钩子中删除它以避免引起任何内存泄漏,那么这是一个很好的特性。下面是一个典型的设置:

mounted () {
    window.addEventListener('resize', this.resizeHandler);
},
beforeDestroy () {
    window.removeEventListener('resize', this.resizeHandler);
}

使用 $on('hook:')方法,你可以仅使用一种生命周期方法(而不是两种)来定义/删除事件。

mounted () {
  window.addEventListener('resize', this.resizeHandler);
  this.$on("hook:beforeDestroy", () => {
    window.removeEventListener('resize', this.resizeHandler);
  })
}

$on 还可以侦听子组件的生命周期钩子

最后一点,生命周期钩子发出自定义事件这一事实意味着父组件可以监听其子级的生命周期钩子。

它将使用正常模式来监听事件(@event),并且可以像其他自定义事件一样进行处理。

<child-comp @hook:mounted="someFunction" />

使用 immediate: true 在初始化时触发watcher

Vue Watchers 是添加高级功能(例如,API调用)的好方法,该功能可以在观察值发生变化时运行。

默认情况下,观察者不会在初始化时运行。根据你的功能,这可能意味着某些数据不会完全初始化。

watch: {
    title: (newTitle, oldTitle) => {
      console.log("Title changed from " + oldTitle + " to " + newTitle)
    }
}

如果你需要 wather 在实例初始化后立即运行,那么你所要做的就是将 wather 转换为具有 handler(newVal, oldVal) 函数以及即时 immediate: true 的对象。

watch: {
    title: {
      immediate: true,
      handler(newTitle, oldTitle) {
        console.log("Title changed from " + oldTitle + " to " + newTitle)
      }
    }
}

你应该始终验证你的Prop

验证 Props 是 Vue 中的基本做法之一。

你可能已经知道可以将props验证为原始类型,例如字符串,数字甚至对象。你也可以使用自定义验证器——例如,如果你想验证一个字符串列表:

props: {
  status: {
    type: String,
    required: true,
    validator: function (value) {
      return [
        'syncing',
        'synced',
        'version-conflict',
        'error'
      ].indexOf(value) !== -1
    }
  }
}

动态指令参数

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

<template>
    ...
    <aButton @[someEvent]="handleSomeEvent()" />...
</template>
<script>
  ...
  data(){
    return{
      ...
      someEvent: someCondition ? "click" : "dbclick"
    }
  },
  methods: {
    handleSomeEvent(){
      // handle some event
    }
  }  
</script>

而且,这实际上也很整洁-你可以将相同的模式应用于动态HTML属性,props等。

重用相同路由的组件

开发人员经常遇到的情况是,多个路由解析为同一个Vue组件。问题是,Vue出于性能原因,默认情况下共享组件将不会重新渲染,如果你尝试在使用相同组件的路由之间进行切换,则不会发生任何变化。

const routes = [
  {
    path: "/a",
    component: MyComponent
  },
  {
    path: "/b",
    component: MyComponent
  },
];

如果你仍然希望重新渲染这些组件,则可以通过在 router-view 组件中提供 :key 属性来实现。

<template>
    <router-view :key="$route.path"></router-view>
</template>

把所有Props传到子组件很容易

这是一个非常酷的功能,可让你将所有 props 从父组件传递到子组件。如果你有另一个组件的包装组件,这将特别方便。所以,与其把所有的 props 一个一个传下去,你可以利用这个,把所有的 props 一次传下去:

<template>
  <childComponent v-bind="$props" />
</template>

代替:

<template>
  <childComponent :prop1="prop1" :prop2="prop2" :prop="prop3" :prop4="prop4" ... />
</template>

把所有事件监听传到子组件很容易

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

<template>
    <div>
    ...
        <childComponentv-on="$listeners" />...    
  <div>
</template>

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

$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 属性上的语法糖。但是,你可以在你的Vue组件中指定一个模型属性来定义使用什么事件和value属性——非常棒!

export default: {
  model: {
    event: 'change',
    prop: 'checked'  
  }
}

总结

这绝不是VueJS技巧的完整列表,这些只是我个人认为最有用的一些,其中一些技巧使我花了很长时间才在Vue中进行实践,因此我认为我可以与大家分享这些知识。

希望他们像我一样对你有帮助!

你最喜欢的VueJS技巧和窍门是什么?我也很想向你学习!


参考链接:


现在关注 《前端全栈开发者》 微信公众号,还送某网精品视频课程网盘资料啊,准能为你节省不少钱!
subscribe2.png


前端全栈开发者
专栏首发于公众号《前端全栈开发者》,订阅关注第一时间阅读好文

Web/Flutter/独立开发者/铲屎官

11.7k 声望
6.6k 粉丝
0 条评论
推荐阅读
在Flutter中动态地改变应用启动器图标
在本文中,我们将讨论如何在 Flutter 应用程序的运行时动态更改多个应用程序启动器图标。在 pubspec.yaml 文件中添加以下依赖项。flutter_dynamic_icon:[链接]考虑我们已经准备好基本的 UI(包含图像和按钮小部...

杭州程序员张张阅读 712

封面图
从零搭建 Node.js 企业级 Web 服务器(零):静态服务
过去 5 年,我前后在菜鸟网络和蚂蚁金服做开发工作,一方面支撑业务团队开发各类业务系统,另一方面在自己的技术团队做基础技术建设。期间借着 Node.js 的锋芒做了不少 Web 系统,有的至今生气蓬勃、有的早已夭折...

乌柏木141阅读 11.9k评论 10

从零搭建 Node.js 企业级 Web 服务器(十五):总结与展望
总结截止到本章 “从零搭建 Node.js 企业级 Web 服务器” 主题共计 16 章内容就更新完毕了,回顾第零章曾写道:搭建一个 Node.js 企业级 Web 服务器并非难事,只是必须做好几个关键事项这几件必须做好的关键事项就...

乌柏木60阅读 6k评论 16

再也不学AJAX了!(二)使用AJAX ① XMLHttpRequest
「再也不学 AJAX 了」是一个以 AJAX 为主题的系列文章,希望读者通过阅读本系列文章,能够对 AJAX 技术有更加深入的认识和理解,从此能够再也不用专门学习 AJAX。本篇文章为该系列的第二篇,最近更新于 2023 年 1...

libinfs39阅读 6.2k评论 12

封面图
从零搭建 Node.js 企业级 Web 服务器(一):接口与分层
分层规范从本章起,正式进入企业级 Web 服务器核心内容。通常,一块完整的业务逻辑是由视图层、控制层、服务层、模型层共同定义与实现的,如下图:从上至下,抽象层次逐渐加深。从下至上,业务细节逐渐清晰。视图...

乌柏木39阅读 7.1k评论 6

CSS 绘制一只思否猫
欢迎关注我的公众号:前端侦探练习 CSS 有一个比较有趣的方式,就是发挥想象,绘制各式各样的图案,比如来绘制一只思否猫?思否猫,SegmentFault 思否的吉祥物,是一只独一无二、特立独行、热爱自由的(&gt;^ω^&lt...

XboxYan42阅读 2.8k评论 14

封面图
还在用 JS 做节流吗?CSS 也可以防止按钮重复点击
举个例子:一个保存按钮,为了避免重复提交或者服务器考虑,往往需要对点击行为做一定的限制,比如只允许每300ms提交一次,这时候我想大部分同学都会到网上直接拷贝一段throttle函数,或者直接引用lodash工具库

XboxYan34阅读 2.2k评论 2

封面图

Web/Flutter/独立开发者/铲屎官

11.7k 声望
6.6k 粉丝
宣传栏