本
文
摘
要
如果你和我一样，是出于好奇而开始了Vue。就我个人而言，对于Vue，我是越学习越喜欢，越喜欢越想学习，哈哈。
在努力变得越来越擅长编写VueJS代码的同时，我也发现了一些特别棒的技巧和窍门。
我认为这是我们都应该知道的VueJS技巧。
一起来看看吧！
1. 在多个路由中使用一个组件
这是开发人员经常会碰到的一种常见情形，即多个路由解析为同一个Vue组件。
然而，问题在于Vue优化了app并重用现有组件而不是创建新的组件。因此，如果你尝试在使用相同组件的路由之间切换，不会有任何变化。
router.js
const routes = [ { path: "/a", component: MyComponent }, { path: "/b", component: MyComponent }, ];要解决此问题，你需要在<router-view>元素上添加:key属性——可能在App.vue文件中。这将帮助路由识别页面何时不同。
<router-view :key=$route.path />现在，app将不会重用现有组件，并且会在你切换路由时更新内容。
2. $on(hook:) 可以帮助简化代码
删除事件侦听器是一种常见的JavaScript最佳实践，因为有助于避免内存泄漏并防止事件冲突。
在Vue中添加/删除组件事件监听器时，我们分别使用了生命周期钩子mounted和beforeDestroy。这是一个典型的设置。
mounted () { window.addEventListener(resize, this.resizeHandler); }, beforeDestroy () { window.removeEventListener(resize, this.resizeHandler); }在典型模式中，我们必须在组件选项对象中单独声明这些钩子。这样做会出现的一个问题是，如果是较大的组件，这些选项可能会相隔数百行代码。
通过查看Vue文档，我们发现了一个用于侦听实例事件的实例方法$on。此外，VueJS生命周期钩子会在触发时发出自定义事件。事件名称是“hook:”+钩子本身的名称（例如hook:created）
结合这两个技巧，我们可以编写用于在mounted方法内部添加和删除的代码。代码如下所示。
mounted () { window.addEventListener(resize, this.resizeHandler); this.$on("hook:beforeDestroy", () => { window.removeEventListener(resize, this.resizeHandler); }) }这意味着我们不必再定义另一个生命周期钩子。这样大大提高了代码的可读性。
3. $on也可以监听子组件的生命周期钩子
生命周期钩子发出自定义事件这一事实，意味着父组件可以监听其子组件的生命周期钩子。
它将使用正常模式来侦听事件(@event)，并且可以像其他自定义事件一样进行处理。
<child-comp @hook:mounted="someFunction" />4.使用immediate:true在初始化时触发watchers
Vue Watchers是添加高级功能（例如API调用）的好方法，高级功能在观察的值发生变化时运行。
但是，默认情况下，watchers不会在初始化时运行。所以，根据函数，这可能意味着某些数据未完全初始化。
watch: { title: (newTitle, oldTitle) => { console.log("Title changed from " + oldTitle + " to " + newTitle) } }如果你想要watchers在初始化实例后立即运行，你所要做的就是将watcher转换成一个具有handler (newVal, oldVal)函数和immediate: true属性的对象。
代码如下所示。
watch: { title: { immediate: true, handler(newTitle, oldTitle) { console.log("Title changed from " + oldTitle + " to " + newTitle) } } }5. 总是验证props
验证props是Vue中的基本实践之一。它甚至在VueJS官方样式指南中被列为“优先级A：基本”样式规则。
它为什么如此重要？
因为它可以让现在的你拯救未来的你。在设计大型项目时，我们总是很容易忘记用于prop的确切格式、类型和其他约定。
如果你在一个较大的开发团队中，你的同事可不会读心术，那么他们怎么知道如何使用你的组件呢？！
因此，只需编写prop验证，即可免除其他人费心费力地跟踪组件以确定prop格式的痛苦。
下面是VueJS样式指南中的prop验证示例。
props: { status: { type: String, required: true, validator: function (value) { return [ syncing, synced, version-conflict, error ].indexOf(value) !== -1 } } }6. 将所有props传递给子组件
说到props，了解如何将所有props从父组件传递到子组件会很有用。
用例有很多，但是当项目具有非常明显的层次结构时，这个方法会特别方便。
而且很简单——只需要记住实例属性！
<child-comp v-bind="$props"></child-comp>7. 必须了解所有组件选项
如果你真的想成为一名VueJS开发专家，那么你需要了解所有不同的组件选项、何时使用它们以及为什么使用它们。
你可以的。别担心。
只是需要花费时间，但在花费大量时间工作于VueJS，专注于学习最高端的技巧、最佳的实践和新方法之后，你很快就会成为超级开发人员。
对于初学者应该回答的一些问题是：
如何在计算属性和watcher之间进行选择？我应该使用哪个生命周期钩子来调用API？什么时候应该使用mixin？mixin到底是什么？有各种各样的小技巧可以帮助我们提高编码效率。你绝对值得拥有。
结论
当然上述并不能涵盖所有VueJS技巧。这些只是我个人认为最有用的。其中一些技巧是我用Vue开发了很长时间才发现的，所以我觉得很有必要与大家分享这些知识。
感谢阅读！如果你觉得文章写的对你有帮助的话，也欢迎分享给你的朋友！
