2020年的12個Vue.js開發技巧和竅門

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

更漂亮的插槽語法

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

<template>
  ...
	<my-table>
    <template #row={ item }>
			/* 一些內容，你能夠在這裏自由使用「item」 */
		</template>
  </my-table>  
	...
</template>
複製代碼

$on(‘hook:’) 能夠幫助你簡化代碼

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

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

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

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

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

$on 還能夠偵聽子組件的生命週期鉤子

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

它將使用正常模式來監聽事件（@event），而且能夠像其餘自定義事件同樣進行處理。

<child-comp @hook:mounted="someFunction" />
複製代碼

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

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

默認狀況下，觀察者不會在初始化時運行。根據你的功能，這可能意味着某些數據不會徹底初始化。

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

若是你須要 wather 在實例初始化後當即運行，那麼你所要作的就是將 wather 轉換爲具備 handler(newVal, oldVal) 函數以及即時 immediate: true 的對象。

watch: {
    title: {
      immediate: true,
      handler(newTitle, oldTitle) {
        console.log("Title changed from " + oldTitle + " to " + newTitle)
      }
    }
}
複製代碼

你應該始終驗證你的Prop

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

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

props: {
  status: {
    type: String,
    required: true,
    validator: function (value) {
      return [
        'syncing',
        'synced',
        'version-conflict',
        'error'
      ].indexOf(value) !== -1
    }
  }
}
複製代碼

動態指令參數

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

<template>
	...
	<aButton @[someEvent]="handleSomeEvent()" />...
</template>
<script> ... data(){ return{ ... someEvent: someCondition ? "click" : "dbclick" } }, methods: { handleSomeEvent(){ // handle some event } } </script>
複製代碼

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

重用相同路由的組件

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

const routes = [
  {
    path: "/a",
    component: MyComponent
  },
  {
    path: "/b",
    component: MyComponent
  },
];
複製代碼

若是你仍然但願從新渲染這些組件，則能夠經過在 router-view 組件中提供 :key 屬性來實現。

<template>
	<router-view :key="$route.path"></router-view>
</template>
複製代碼

把全部Props傳到子組件很容易

這是一個很是酷的功能，可以讓你將全部 props 從父組件傳遞到子組件。若是你有另外一個組件的包裝組件，這將特別方便。因此，與其把全部的 props 一個一個傳下去，你能夠利用這個，把全部的 props 一次傳下去：

<template>
  <childComponent v-bind="$props" />
</template>
複製代碼

代替：

<template>
  <childComponent :prop1="prop1" :prop2="prop2" :prop="prop3" :prop4="prop4" ... />
</template>
複製代碼

把全部事件監聽傳到子組件很容易

若是子組件不在父組件的根目錄下，則能夠將全部事件偵聽器從父組件傳遞到子組件，以下所示：

<template>
	<div>
    ...
		<childComponentv-on="$listeners" />...	
  <div>
</template>
複製代碼

若是子組件位於其父組件的根目錄，則默認狀況下它將得到這些組件，所以不須要使用這個小技巧。

$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屬性——很是棒！

export default: {
  model: {
    event: 'change',
    prop: 'checked'  
  }
}
複製代碼

總結

這毫不是VueJS技巧的完整列表，這些只是我我的認爲最有用的一些，其中一些技巧使我花了很長時間纔在Vue中進行實踐，所以我認爲我能夠與你們分享這些知識。

但願他們像我同樣對你有幫助！

你最喜歡的VueJS技巧和竅門是什麼？我也很想向你學習！

---

參考連接：

• medium.com/better-prog…
• learnvue.co/2020/01/7-s…

---

若是對你有所啓發和幫助，能夠點個關注、收藏，也能夠留言討論，這是對做者的最大鼓勵。

做者簡介：Web前端工程師，全棧開發工程師、持續學習者。

如今關注 《前端外文精選》 微信公衆號，還送某網精品視頻課程網盤資料啊，準能爲你節省很多錢！