我比較喜歡使用 Vue 來(lái)開(kāi)發(fā)，所以有時(shí)會(huì)深入研究其功能和特性。通過(guò)這篇文章，向你們介紹十個(gè)很酷的竅門(mén)和技巧，以幫助大家成為更好的 Vue 開(kāi)發(fā)者。

1. 插槽語(yǔ)法更漂亮

隨著Vue 2.6的推出，已經(jīng)引入了插槽的簡(jiǎn)寫(xiě)方式，之前簡(jiǎn)寫(xiě)可用于事件(例如，@click表示v-on:click事件)或冒號(hào)表示方式用于綁定(:src)。例如，如果有一個(gè)表格組件，則可以按以下方式使用此功能：

2. $on(‘hook:’)

如果要在created或mounted方法中定義自定義事件偵聽(tīng)器或第三方插件，并且需要在beforeDestroy方法中將其刪除以免引起任何內(nèi)存泄漏，則可以使用此功能。使用$on(‘hook:’)方法，我們可以?xún)H使用一種生命周期方法(而不是兩種)來(lái)定義/刪除事件。

3. prop 驗(yàn)證

你可能已經(jīng)知道可以將props驗(yàn)證為原始類(lèi)型，例如字符串，數(shù)字甚至對(duì)象。我們還可以使用自定義驗(yàn)證器，例如，如果要針對(duì)字符串列表進(jìn)行驗(yàn)證：

4. 動(dòng)態(tài)指令參數(shù)

Vue 2.6 的最酷功能之一是可以將指令參數(shù)動(dòng)態(tài)傳遞給組件。假設(shè)有一個(gè)按鈕組件，并且在某些情況下想監(jiān)聽(tīng)單擊事件，而在其他情況下想監(jiān)聽(tīng)雙擊事件。這就是動(dòng)態(tài)指令派上用場(chǎng)的地方了：

5. 重用同一路由的組件

有時(shí)，我們不同路由共用某些時(shí)，如果在這些路由之間切換，則默認(rèn)情況下，共享組件將不會(huì)重新渲染，因?yàn)閂ue 出于性能原因會(huì)重用該組件。但是，如果我們?nèi)匀幌Ｍ匦落秩具@些組件，則可以通過(guò)在路由器視圖組件中提供:key屬性來(lái)實(shí)現(xiàn)重新渲染。

6. 從父類(lèi)到子類(lèi)的所有 props

這是一個(gè)非?？岬墓δ?，可將所有prop從父組件傳遞到子組件。如果我們有另一個(gè)組件的包裝器組件，這將特別方便。因?yàn)?，我們不必一個(gè)一個(gè)將prop傳遞給子組件，而是一次傳遞所有prop：

上面的可以代替下面的做法：

7. 從父類(lèi)到子類(lèi)的所有事件偵聽(tīng)器

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

如果子組件位于其父組件的根目錄下，則默認(rèn)情況下它將獲得那些組件，因此不需要此小技巧。

8. $createElement

默認(rèn)情況下，每個(gè)Vue實(shí)例都可以訪問(wèn)$createElement方法來(lái)創(chuàng)建和返回虛擬節(jié)點(diǎn)。例如，可以利用它在可以通過(guò)v-html指令傳遞的方法中使用標(biāo)記。在函數(shù)組件中，可以將此方法作為渲染函數(shù)中的第一個(gè)參數(shù)訪問(wèn)。

9. 使用 JSX

由于Vue CLI 3默認(rèn)支持使用JSX，因此現(xiàn)在(如果愿意)我們可以使用JSX編寫(xiě)代碼(例如，可以方便地編寫(xiě)函數(shù)組件)。如果尚未使用Vue CLI 3，則可以使用babel-plugin-transform-vue-jsx獲得JSX支持。

10. 自定義 v-model

默認(rèn)情況下，v-model是@input事件監(jiān)聽(tīng)器和:value props上的語(yǔ)法糖。但是，我們可以在Vue組件中指定一個(gè)模型屬性，以定義使用什么事件和值