📖摘要
今天分享下 —— Vue系列：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 屬性——非常棒！
exportdefault: {
model: {
event: 'change',
prop: 'checked'
}
}
這絕不是
VueJS技巧的完整列表，只是我個人認爲最有用的一些，其中一些技巧使我花了很長時間纔在Vue中進行實踐，因此我認爲我可以與大家分享這些知識。
🎉最後
-
更多參考精彩博文請看這裏：《陳永佳的博客》
-
喜歡博主的小夥伴可以加個關注、點個贊哦，持續更新嘿嘿！