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

更漂亮的插槽語法

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

.../* 一些內(nèi)容，你可以在這里自由使用“item” */ ...

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

刪除事件監(jiān)聽器是一種常見的最佳實踐，因為它有助于避免內(nèi)存泄露并防止事件沖突。

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

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 還可以偵聽子組件的生命周期鉤子

最后一點，生命周期鉤子發(fā)出自定義事件這一事實意味著父組件可以監(jiān)聽其子級的生命周期鉤子。

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

使用 immediate: true 在初始化時觸發(fā)watcher

Vue Watchers 是添加高級功能(例如，API調(diào)用)的好方法，該功能可以在觀察值發(fā)生變化時運行。

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

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

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

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

你應(yīng)該始終驗證你的Prop

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

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

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

動態(tài)指令參數(shù)

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

......

而且，這實際上也很整潔-你可以將相同的模式應(yīng)用于動態(tài)HTML屬性，props等。

重用相同路由的組件

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

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

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

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

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

代替：

把所有事件監(jiān)聽傳到子組件很容易

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

......

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

$createElement

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

使用JSX

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

自定義 v-model

默認(rèn)情況下，v-model 是 @input 事件偵聽器和 :value 屬性上的語法糖。但是，你可以在你的Vue組件中指定一個模型屬性來定義使用什么事件和value屬性——非常棒！

export default: { model: { event: 'change', prop: 'checked' }}

總結(jié)

這絕不是VueJS技巧的完整列表，這些只是我個人認(rèn)為最有用的一些，其中一些技巧使我花了很長時間才在Vue中進行實踐，因此我認(rèn)為我可以與大家分享這些知識。

希望他們像我一樣對你有幫助！

你最喜歡的VueJS技巧和竅門是什么？我也很想向你學(xué)習(xí)！

如果對你有所啟發(fā)和幫助，可以點個關(guān)注、收藏，也可以留言討論，這是對作者的最大鼓勵。

作者簡介：Web前端工程師，全棧開發(fā)工程師、持續(xù)學(xué)習(xí)者。

現(xiàn)在關(guān)注《前端外文精選》微信公眾號，還送某網(wǎng)精品視頻課程網(wǎng)盤資料啊，準(zhǔn)能為你節(jié)省不少錢！

總結(jié)

以上是生活随笔為你收集整理的vue双击事件_我总结了12个Vue.js开发技巧和窍门的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。