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:’) 能够帮助你简化代码

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

若是你想在 created 或 mounted 的钩子中定义自定义事件监听器或第三方插件，而且须要在 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技巧和窍门是什么？我也很想向你学习！

---

参考连接：

• medium.com/better-prog…
• learnvue.co/2020/01/7-s…

---

若是对你有所启发和帮助，能够点个关注、收藏，也能够留言讨论，这是对做者的最大鼓励。

做者简介：Web前端工程师，全栈开发工程师、持续学习者。

如今关注 《前端外文精选》 微信公众号，还送某网精品视频课程网盘资料啊，准能为你节省很多钱！