1、在多條路線中使用一個(gè)組件

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

要解決此問題，你需要在 <router-view> 元素上添加 :key 屬性——這可能在你的 App.vue 文件中。這將幫助你路由器識別頁面何時(shí)不同。

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

現(xiàn)在，你的應(yīng)用將不會(huì)重用現(xiàn)有組件，并且會(huì)在你切換路由時(shí)更新你的內(nèi)容。 

2、$on('hook:') 可以幫助簡化你的代碼

刪除事件偵聽器是 Javascript 一種常見的實(shí)踐，因?yàn)樗兄诒苊鈨?nèi)存泄漏并防止事件沖突。 

在Vue中添加/刪除組件事件監(jiān)聽器時(shí)，我們分別使用了mounted和beforeDestroy的生命周期鉤子。這是一個(gè)典型的設(shè)置。

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

在典型的模式中，我們必須在組件選項(xiàng)對象中單獨(dú)聲明這些鉤子。這樣做的一個(gè)問題是，對于較大的組件，這些選項(xiàng)可能相隔數(shù)百行。

但是，查看 Vue 文檔，我們看到有一個(gè)實(shí)例方法 $on 用于偵聽實(shí)例事件。

此外，VueJS 生命周期鉤子會(huì)在觸發(fā)時(shí)發(fā)出自定義事件。事件名稱是“hook：”hook+本身的名稱（例如，hook：創(chuàng)建）

結(jié)合這兩個(gè)技巧，我們可以編寫用于在掛載方法內(nèi)部添加和刪除的代碼。代碼看起來像這樣。 

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

這意味著我們不必定義另一個(gè)生命周期hook。這樣可以大大提高代碼可讀性的東西。

3、$on 也可以監(jiān)聽子組件的生命周期hook

生命周期hook發(fā)出自定義事件，這一事實(shí)意味著父組件可以偵聽其子組件的生命周期hook。 

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

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

4、使用immediate:true在初始化時(shí)觸發(fā)觀察者

Vue Watchers是添加高級功能（例如 API 調(diào)用）的好方法，該功能在觀察到的值發(fā)生變化時(shí)運(yùn)行。 

但是，默認(rèn)情況下，觀察者不會(huì)在初始化時(shí)運(yùn)行。根據(jù)你的功能，這可能意味著某些數(shù)據(jù)未完全初始化。

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

如果你需要你的觀察者在實(shí)例初始化后立即運(yùn)行，你所要做的就是將你的觀察者轉(zhuǎn)換成一個(gè)具有處理程序 (newVal, oldVal)函數(shù)和一個(gè) immediate: true 屬性的對象。 

其代碼可能如下所示。

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

5、你應(yīng)該總是驗(yàn)證你的props

驗(yàn)證 props 是 Vue 中的基本實(shí)踐之一。它甚至在VueJS 官方樣式指南中被列為“優(yōu)先級 A：基本”樣式規(guī)則。 

為什么重要？ 

它基本上可以從現(xiàn)在的你中拯救未來的你。在設(shè)計(jì)大型項(xiàng)目時(shí)，很容易忘記你用于prop的確切格式、類型和其他約定。

如果你在一個(gè)更大的開發(fā)團(tuán)隊(duì)中，你的同事不會(huì)讀心術(shù)，所以讓他們清楚如何使用你的組件！

因此，讓每個(gè)人都不必費(fèi)力地跟蹤你的組件以確定道具的格式，并且只需編寫prop驗(yàn)證即可。 

在設(shè)計(jì)大型項(xiàng)目時(shí)，很容易忘記你用于prop的確切格式、類型和其他約定。

這是 VueJS 樣式指南中的 prop 驗(yàn)證示例。

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

6、將所有 props 傳遞給子組件很容易

說到 props，了解如何將所有props 從父組件傳遞到其子組件之一很有用。 

有大量的用例，但是當(dāng)你的項(xiàng)目具有非常分層的結(jié)構(gòu)時(shí)，它特別方便。 

這很簡單——你只需要記住你的實(shí)例屬性！

<child-comp v-bind="$props"></child-comp>

7、你必須了解所有組件選項(xiàng)

如果你真的想成為一名 VueJS 開發(fā)專家，你需要了解所有不同的組件選項(xiàng)、何時(shí)使用它們以及為什么使用它們。 

你會(huì)的，別擔(dān)心。

這只是需要時(shí)間，但是在花費(fèi)越來越多的時(shí)間在 VueJS 中工作并致力于學(xué)習(xí)頂級技巧、最佳實(shí)踐和新方法之后，你很快就會(huì)成為超級開發(fā)人員。 

結(jié)論

這些絕不是 VueJS 技巧的完整列表。這些只是我個(gè)人認(rèn)為最有用的一些技巧。其中一些技巧是我在 Vue 中開發(fā)了很長時(shí)間才發(fā)現(xiàn)的，所以我想與大家分享這些知識。 

我希望你發(fā)現(xiàn)它們和我一樣有幫助！

感謝你的閱讀，如果你有最喜歡的 VueJS 技巧，請?jiān)诹粞詤^(qū)告訴我，我也很想向你學(xué)習(xí)！ 

學(xué)習(xí)更多技能

請點(diǎn)擊下方公眾號