這 10 個技巧讓你成爲一個更好的 Vue 開發者

做者：Simon Holdorf

譯者：前端小智

來源：telerik

點贊再看，養成習慣

本文 GitHub github.com/qq449245884… 上已經收錄，更多往期高贊文章的分類，也整理了不少個人文檔，和教程資料。歡迎Star和完善，你們面試能夠參照考點複習，但願咱們一塊兒有點東西。

---

簡介

我比較喜歡使用 Vue 來開發，因此有時會深刻研究其功能和特性。 經過這篇文章，向大家介紹十個很酷的竅門和技巧，以幫助你們成爲更好的 Vue 開發者。

插槽語法更漂亮

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

$on(‘hook:’)

若是要在created或mounted方法中定義自定義事件偵聽器或第三方插件，而且須要在beforeDestroy方法中將其刪除以避免引發任何內存泄漏，則可使用此功能。 使用$on(‘hook:’)方法，咱們能夠僅使用一種生命週期方法（而不是兩種）來定義/刪除事件。

prop 驗證

你可能已經知道能夠將props驗證爲原始類型，例如字符串，數字甚至對象。 咱們還可使用自定義驗證器，例如，若是要針對字符串列表進行驗證：

動態指令參數

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

重用同一路由的組件

有時，咱們不一樣路由共用某些時，若是在這些路由之間切換，則默認狀況下，共享組件將不會從新渲染，由於Vue 出於性能緣由會重用該組件。 可是，若是咱們仍然但願從新渲染這些組件，則能夠經過在路由器視圖組件中提供:key屬性來實現從新渲染。

從父類到子類的全部 props

這是一個很是酷的功能，可將全部prop從父組件傳遞到子組件。 若是咱們有另外一個組件的包裝器組件，這將特別方便。 由於，咱們沒必要一個一個將prop傳遞給子組件，而是一次傳遞全部prop：

上面的能夠代替下面的作法

從父類到子類的全部事件偵聽器

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

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

$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 props上的語法糖。可是，咱們能夠在Vue組件中指定一個模型屬性，以定義使用什麼事件和值

總結

但願這些竅門和技巧對你有所幫助，若是你也知道哪些技巧，歡迎留言。

---

代碼部署後可能存在的BUG無法實時知道，過後爲了解決這些BUG，花了大量的時間進行log 調試，這邊順便給你們推薦一個好用的BUG監控工具 Fundebug。

原文：www.telerik.com/blogs/12-ti…

---

交流

乾貨系列文章彙總以下，以爲不錯點個Star，歡迎 加羣 互相學習。

github.com/qq449245884…

我是小智，公衆號「大遷世界」做者，對前端技術保持學習愛好者。我會常常分享本身所學所看的乾貨，在進階的路上，共勉！

關注公衆號，後臺回覆福利，便可看到福利，你懂的。