7 个简单的 VueJS 小技巧，助力你成为更好的开发者

太过爱你忘了你带给我的痛 2022-09-08 11:32 154阅读 0赞

![b69f5540548aaf21ab819b02942b7807.png][]

英文 | https://learnvue.co/2020/01/7-simple-vuejs-tips-you-can-use-to-become-a-better-developer/

翻译 | 小爱

如果你和我一样，你是出于好奇开始了 Vue。就个人而言，我喜欢它——想尽可能多地学习。

在尝试后，我越来越喜欢编写 VueJS 代码，但我遇到了一些问题，后来，都一并解决了，这些问题，如果我当初早点知道的话，也许会好很多。

所以，今天我与你分享这些技巧，也希望你在学VueJS的过程中，早点知道它们。

因此，让我们深入了解这 7 个 VueJS 技巧。

现在，让我们开始吧！

## **1、在多条路线中使用一个组件** ##

这是开发人员遇到的一种非常常见的情况，即多个路由解析到同一个 Vue 组件。

然而，问题在于 Vue 优化了你的应用程序并重用现有组件而不是创建新组件。因此，如果你尝试在使用相同组件的路由之间切换，则不会有任何改变。

//路由器.js
    const routes = [
      {
        path: "/a",
        component: MyComponent
      },
      {
        path: "/b",
        component: MyComponent
      },
    ];

要解决此问题，你需要在 <router-view> 元素上添加 :key 属性——这可能在你的 App.vue 文件中。这将帮助你路由器识别页面何时不同。

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

现在，你的应用将不会重用现有组件，并且会在你切换路由时更新你的内容。

## **2、$on('hook:') 可以帮助简化你的代码** ##

删除事件侦听器是 Javascript 一种常见的实践，因为它有助于避免内存泄漏并防止事件冲突。

在Vue中添加/删除组件事件监听器时，我们分别使用了mounted和beforeDestroy的生命周期钩子。这是一个典型的设置。

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

在典型的模式中，我们必须在组件选项对象中单独声明这些钩子。这样做的一个问题是，对于较大的组件，这些选项可能相隔数百行。

但是，查看 Vue 文档，我们看到有一个实例方法 $on 用于侦听实例事件。

此外，VueJS 生命周期钩子会在触发时发出自定义事件。事件名称是“hook：”hook+本身的名称（例如，hook：创建）

结合这两个技巧，我们可以编写用于在挂载方法内部添加和删除的代码。代码看起来像这样。

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

这意味着我们不必定义另一个生命周期hook。这样可以大大提高代码可读性的东西。

## **3、$on 也可以监听子组件的生命周期hook** ##

生命周期hook发出自定义事件，这一事实意味着父组件可以侦听其子组件的生命周期hook。

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

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

## **4、使用immediate:true在初始化时触发观察者** ##

Vue Watchers是添加高级功能（例如 API 调用）的好方法，该功能在观察到的值发生变化时运行。

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

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

如果你需要你的观察者在实例初始化后立即运行，你所要做的就是将你的观察者转换成一个具有处理程序 (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 中工作并致力于学习顶级技巧、最佳实践和新方法之后，你很快就会成为超级开发人员。

# **结论** #

这些绝不是 VueJS 技巧的完整列表。这些只是我个人认为最有用的一些技巧。其中一些技巧是我在 Vue 中开发了很长时间才发现的，所以我想与大家分享这些知识。

我希望你发现它们和我一样有帮助！

感谢你的阅读，如果你有最喜欢的 VueJS 技巧，请在留言区告诉我，我也很想向你学习！

#  #

**学习更多技能**

**请点击下方公众号**

![866a9d698786425d2129742c2c538e4b.gif][]

[b69f5540548aaf21ab819b02942b7807.png]: /images/20220829/c01d8d82bcb64aab96e51b6461bed513.png
[866a9d698786425d2129742c2c538e4b.gif]: /images/20220829/fb42f75a289d40dd836997fe7d8a853a.png