7 个特别简单的Vue实用技巧

如果你和我一样，是出于好奇而开始了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开发了很长时间才发现的，所以我觉得很有必要与大家分享这些知识。

感谢阅读！如果你觉得文章写的对你有帮助的话，也欢迎分享给你的朋友！