7 個特別簡單的 Vue 實用技巧

本文翻譯自：
https://learnvue.co/2020/01/7-simple-vuejs-tips-you-can-use-to-become-a-better-developer/

如果你和我一樣，是出於好奇而開始了 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 將不會重用現有組件，並且會在你切換路由時更新內容。

  1. $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);
    })
}

這意味着我們不必再定義另一個生命週期鉤子。這樣大大提高了代碼的可讀性。

  1. $on 也可以監聽子組件的生命週期鉤子

生命週期鉤子發出自定義事件這一事實，意味着父組件可以監聽其子組件的生命週期鉤子。

它將使用正常模式來偵聽事件 (@event)，並且可以像其他自定義事件一樣進行處理。

<child-comp @hook:mounted="someFunction" />
  1. 使用 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)
      }
    }
}
  1. 總是驗證 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
    }
  }
}
  1. 將所有 props 傳遞給子組件

說到 props，瞭解如何將所有 props 從父組件傳遞到子組件會很有用。

用例有很多，但是當項目具有非常明顯的層次結構時，這個方法會特別方便。

而且很簡單——只需要記住實例屬性！

<child-comp v-bind="$props"></child-comp>
  1. 必須瞭解所有組件選項

如果你真的想成爲一名 VueJS 開發專家，那麼你需要了解所有不同的組件選項、何時使用它們以及爲什麼使用它們。

你可以的。別擔心。

只是需要花費時間，但在花費大量時間工作於 VueJS，專注於學習最高端的技巧、最佳的實踐和新方法之後，你很快就會成爲超級開發人員。

對於初學者應該回答的一些問題是：

有各種各樣的小技巧可以幫助我們提高編碼效率。你絕對值得擁有。

結論

當然上述並不能涵蓋所有 VueJS 技巧。這些只是我個人認爲最有用的。其中一些技巧是我用 Vue 開發了很長時間才發現的，所以我覺得很有必要與大家分享這些知識。

本文由 Readfog 進行 AMP 轉碼，版權歸原作者所有。
來源：https://mp.weixin.qq.com/s/bmncZ_BLImIWtadOV54LYA

猜你喜歡