10 个技巧和窍门助你成为更优秀的 VueJS 开发者

介绍

我非常喜欢使用 VueJS，每次使用框架时，我都乐于深入研究它的功能和特性。在这篇文章中，我将向你介绍 10 个你可能还不知道的实用技巧，并尝试帮助你成为更优秀的 Vue 开发者。

插槽语法变得漂亮

Vue 2.6 引入了一种插槽的简写符号，可以像事件一样使用（例如，@click 表示 v-on:click 事件），也可以像绑定一样使用冒号符号 (:src)。例如，如果你有一个 Table-Component，你可以按如下方式使用此功能：

<template>
  ...
  <my-table>
    <template #row="{ item }">
      /* some content here. You can freely use 'item' here */
    </template>
  </my-table>
  ...
</template>

$on('hook:')

如果您想在 created 或 loaded 钩子中定义自定义事件监听器或第三方插件，并需要在 beforeDestroy 钩子中将其移除以避免内存泄漏，那么这是一个非常有用的功能。使用 $on('hook:') 方法，您只需在一个生命周期方法中定义/移除事件，而无需两次。

mounted() {
 const aThirdPartyPlugin = aThirdPartyPlugin()
 this.$on('hook:beforeDestroy', () => {
  aThirdPartyPlugin.destroy()
 })
}

Prop 验证

你可能已经知道，你可以将 props 验证为原始类型，例如 String、Number 甚至 Object。但你也可以使用自定义验证器，例如，如果你想要验证一个字符串列表：

alertType: {
 validator: value => ['signup', 'login', 'logout'].includes(value)
}

动态指令参数

Vue 2.6 最酷的功能之一是可以动态地将指令参数传递给组件。想象一下，你有一个 Button 组件，希望在某些情况下监听 Click 事件，而在其他情况下监听 DoubleClick 事件。这时，这些指令就派上用场了：

<template>
  ...
  <aButton @[someEvent]="handleSomeEvent()"/>
  ...
</template>

<script>
  ...
  data(){
    return{
      ...
      someEvent: someCondition ? "click" : "dblclick"
    }
  },

  methods:{
    handleSomeEvent(){
      // handle some event
    }
  }
  ...
</script>

而且还有什么是真正整洁的 --> 您可以将相同的模式应用于动态 HTML 属性、道具等等！

对同一路由重复使用组件

有时，不同的路由会共享一些组件。如果在这些路由之间切换，共享的组件默认不会重新渲染，因为 Vue 出于性能考虑会复用该组件。但如果您仍然希望这些组件重新渲染，可以通过为 Router-View-Component 提供一个 :key 属性来实现。

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

父母给孩子的所有道具

这是一个非常酷的功能，允许你将父组件的所有 props 传递给子组件。如果你有另一个组件的 Wrapper-Component，这个功能会特别方便。因此，你不用一个一个地传递所有 props，而是可以一次传递所有 props：

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

而不是：

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

从父级到子级的所有事件监听器

如果您有一个不在父组件根部的子组件，您可以将所有事件监听器从父组件传递到子组件，如下所示：

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

如果子组件位于其父组件的根，它将默认获取这些，并且您不需要这个小技巧。

$创建元素

每个 Vue 实例默认都可以访问 $createElement 方法来创建并返回虚拟节点。例如，可以利用该方法在通过 v-html 指令传递的方法中使用标记。在函数式组件中，该方法可以作为 render 函数的第一个参数进行访问。

使用 JSX

从 Vue CLI 3 开始，它默认支持 JSX，因此如果您愿意（甚至可能来自 React），现在就可以用 JSX 编写代码，这在编写函数式组件等情况下非常方便。如果您尚未使用 Vue CLI 3，可以使用 babel-plugin-transform-vue-jsx 来获得 JSX 支持！

自定义 v-model

默认情况下，V-model 是我们所说的 @input 事件监听器和 :value 属性的语法糖。但你可以在 Vue 组件中指定一个“model”属性来定义要使用的事件和值属性——太棒了！

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

结论

我希望能给你一些建议，帮助你成为一名更优秀的 VueJS 开发者。如果你也对 React 开发感兴趣，可以看看我的博文《10 个让你成为更优秀 ReactJS 开发者的技巧和诀窍》。欢迎留言并关注我，获取更多后续文章！