使你成為更好的Vue.js開發人員的12個技巧和竅門

我真的很喜歡使用Vue.js，每次使用框架時，我都會喜歡深入研究其功能和特性。通過這篇文章，我向你介紹了十個很酷的提示和技巧，你可能尚未意識到這些技巧和竅門，以幫助你成為更好的Vue開發人員。

更漂亮的插槽語法

隨著Vue 2.6的推出，已經引入了插槽的簡寫方式，可用於事件（例如，@click 表示 v-on:click 事件）或冒號表示方式用於綁定（:src）。例如，如果你有一個表格組件，你可以使用這個功能如下：

<code><template>
  ...
\t<my-table>
    <template>
\t\t\t/* 一些內容，你可以在這裡自由使用“item” */
\t\t/<template>
  /<my-table>  
\t...
/<template>/<code>

$on(‘hook:’) 可以幫助你簡化代碼

刪除事件監聽器是一種常見的最佳實踐，因為它有助於避免內存洩露並防止事件衝突。

如果你想在 created 或 mounted 的鉤子中定義自定義事件監聽器或第三方插件，並且需要在 beforeDestroy 鉤子中刪除它以避免引起任何內存洩漏，那麼這是一個很好的特性。下面是一個典型的設置：

<code>mounted () { 

    window.addEventListener('resize', this.resizeHandler);
},
beforeDestroy () {
    window.removeEventListener('resize', this.resizeHandler);
}/<code>

使用 $on('hook:') 方法，你可以僅使用一種生命週期方法（而不是兩種）來定義/刪除事件。

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

$on 還可以偵聽子組件的生命週期鉤子

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

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

<code><child-comp>/<code>

使用 immediate: true 在初始化時觸發watcher

Vue Watchers 是添加高級功能（例如，API調用）的好方法，該功能可以在觀察值發生變化時運行。

默認情況下，觀察者不會在初始化時運行。根據你的功能，這可能意味著某些數據不會完全初始化。

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

如果你需要 wather 在實例初始化後立即運行，那麼你所要做的就是將 wather 轉換為具有 handler(newVal, oldVal) 函數以及即時 immediate: true 的對象。

<code>watch: {
    title: {
      immediate: true,
      handler(newTitle, oldTitle) {
        console.log("Title changed from " + oldTitle + " to " + newTitle)
      }
    }
}/<code>

你應該始終驗證你的Prop

驗證 Props 是 Vue 中的基本做法之一。

你可能已經知道可以將props驗證為原始類型，例如字符串，數字甚至對象。你也可以使用自定義驗證器——例如，如果你想驗證一個字符串列表：

<code>props: {
  status: {
    type: String,
    required: true,
    validator: function (value) {
      return [ 

        'syncing',
        'synced',
        'version-conflict',
        'error'
      ].indexOf(value) !== -1
    }
  }
}/<code>

動態指令參數

Vue 2.6的最酷功能之一是可以將指令參數動態傳遞給組件。假設你有一個按鈕組件，並且在某些情況下想監聽單擊事件，而在其他情況下想監聽雙擊事件。這就是這些指令派上用場的地方：

<code><template>
\t...
\t<abutton>...
/<template>
/<code>

而且，這實際上也很整潔-你可以將相同的模式應用於動態HTML屬性，props等。

重用相同路由的組件

開發人員經常遇到的情況是，多個路由解析為同一個Vue組件。問題是，Vue出於性能原因，默認情況下共享組件將不會重新渲染，如果你嘗試在使用相同組件的路由之間進行切換，則不會發生任何變化。

<code>const routes = [
  {
    path: "/a",
    component: MyComponent 

  },
  {
    path: "/b",
    component: MyComponent
  },
];/<code>

如果你仍然希望重新渲染這些組件，則可以通過在 router-view 組件中提供 :key 屬性來實現。

<code><template>
\t<router-view>
/<template>/<code>

把所有Props傳到子組件很容易

這是一個非常酷的功能，可讓你將所有 props 從父組件傳遞到子組件。如果你有另一個組件的包裝組件，這將特別方便。所以，與其把所有的 props 一個一個傳下去，你可以利用這個，把所有的 props 一次傳下去：

<code><template>
\t<childcomponent>
/<template>/<code>

代替：

<code><template>
\t<childcomponent>
/<template>/<code>

把所有事件監聽傳到子組件很容易

如果子組件不在父組件的根目錄下，則可以將所有事件偵聽器從父組件傳遞到子組件，如下所示：

<code><template>
\t

    ...
\t\t<childcomponentv-on>...\t
  

如果子組件位於其父組件的根目錄，則默認情況下它將獲得這些組件，因此不需要使用這個小技巧。
$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屬性——非常棒！
<code>export default: {
  model: {
    event: 'change',
    prop: 'checked'  
  }
}/<code>
總結
這絕不是VueJS技巧的完整列表，這些只是我個人認為最有用的一些，其中一些技巧使我花了很長時間才在Vue中進行實踐，因此我認為我可以與大家分享這些知識。
希望他們像我一樣對你有幫助！
你最喜歡的VueJS技巧和竅門是什麼？我也很想向你學習！


如果對你有所啟發和幫助，可以點個關注、收藏，也可以留言討論，這是對作者的最大鼓勵。
作者簡介：Web前端工程師，全棧開發工程師、持續學習者。 
現在關注《前端外文精選》微信公眾號，還送某網精品視頻課程網盤資料啊，準能為你節省不少錢！
"
/<template>/<code>

閱讀更多 做工程師不做碼農 的文章

關鍵字: 竅門 top position