這篇文章整理分享8 個很棒的 Vue 開發技巧，包括路由參數解耦、功能組件、樣式範圍、watch的高階使用、watch監聽多個變數等，希望對大家有幫助！
#通常在元件中使用路由參數，大多數人會做以下事情。
export default {
methods: {
getParamsId() {
return this.$route.params.id
}
}
}在元件中使用 $route 會導致與其對應路由的高度耦合，透過將其限制為某些 URL 來限制元件的靈活性。正確的做法是透過 props 來解耦。
const router = new VueRouter({
routes: [{
path: /user/:id ,
component: User,
props: true
}]
})將路由的 props 屬性設為 true 後，組件內部可以透過 props 接收 params 參數。 【相關推薦：vuejs影片教學、web前端開發】
export default {
props: [ id ],
methods: {
getParamsId() {
return this.id
}
}
}您也可以透過功能模式傳回道具。
const router = new VueRouter({
routes: [{
path: /user/:id ,
component: User,
props: (route) => ({
id: route.query.id
})
}]
})功能元件是無狀態的，它不能被實例化，也沒有任何生命週期或方法。建立功能組件也很簡單，只需在模板中添加功能聲明即可。它一般適用於只依賴外部資料變化的元件，並且由於其輕量級而提高了渲染效能。元件所需的一切都透過上下文參數傳遞。它是一個上下文對象，具體屬性見文檔。這裡的 props 是一個包含所有綁定屬性的物件。
<template functional>
<div class="list">
<div class="item" v-for="item in props.list" :key="item.id" @click="props.itemClick(item)">
<p>{{item.title}}</p>
<p>{{item.content}}</p>
</div>
</div>
</template>父元件使用
<template>
<div>
<List :list="list" :itemClick="item => (currentItem = item)" />
</div>
</template>import List from @/components/List.vue
export default {
components: {
List
},
data() {
return {
list: [{
title: title ,
content: content
}],
currentItem:
}
}
}開發中修改第三方元件樣式很常見，但是由於scoped屬性的樣式隔離，可能需要去掉scoped或另起一個樣式。這些做法有副作用（組件樣式污染，缺乏優雅），在css預處理器中使用樣式滲透來生效。我們可以使用>>> 或/deep/ 來解決這個問題：
<style scoped>
Outer layer >>> .el-checkbox {
display: block;
font-size: 26px;
.el-checkbox__label {
font-size: 16px;
}
}
</style><style scoped>
/deep/ .el-checkbox {
display: block;
font-size: 26px;
.el-checkbox__label {
font-size: 16px;
}
}
</style>watch在監聽器屬性改變時觸發，有時我們希望watch 在元件建立後立即執行。可能想到的方式是在創建生命週期中調用它一次，但這不是一種優雅的編寫方式，所以也許我們可以使用這樣的東西。
export default {
data() {
return {
name: Joe
}
},
watch: {
name: {
handler: sayName ,
immediate: true
}
},
methods: {
sayName() {
console.log(this.name)
}
}
}Deep Listening
#監聽一個物件時，當物件內部的屬性改變時，watch是不會被觸發的，所以我們可以為它設定深度監聽。
export default {
data: {
studen: {
name: Joe ,
skill: {
run: {
speed: fast
}
}
}
},
watch: {
studen: {
handler: sayName ,
deep: true
}
},
methods: {
sayName() {
console.log(this.studen)
}
}
}觸發監聽器執行多個方法
#使用數組，您可以設定多個形式，包括字串、函數、物件。
export default {
data: {
name: Joe
},
watch: {
name: [
sayName1 ,
function(newVal, oldVal) {
this.sayName2()
},
{
handler: sayName3 ,
immaediate: true
}
]
},
methods: {
sayName1() {
console.log( sayName1==> , this.name)
},
sayName2() {
console.log( sayName2==> , this.name)
},
sayName3() {
console.log( sayName3==> , this.name)
}
}
}watch 本身不能監聽多個變數。但是，我們可以透過傳回具有計算屬性的物件然後監聽該物件來「監聽多個變數」。
export default {
data() {
return {
msg1: apple ,
msg2: banana
}
},
compouted: {
msgObj() {
const { msg1, msg2 } = this
return {
msg1,
msg2
}
}
},
watch: {
msgObj: {
handler(newVal, oldVal) {
if (newVal.msg1 != oldVal.msg1) {
console.log( msg1 is change )
}
if (newVal.msg2 != oldVal.msg2) {
console.log( msg2 is change )
}
},
deep: true
}
}
}#$event 是事件物件的特殊變量，它在某些場景下為我們提供了更多的可用參數來實現複雜的功能。本機事件：與本機事件中的預設事件物件行為相同。
<template>
<div>
<input type="text" @input="inputHandler( hello , $event)" />
</div>
</template>export default {
methods: {
inputHandler(msg, e) {
console.log(e.target.value)
}
}
}自訂事件：在自訂事件中表示為捕獲從子元件拋出的值。
export default {
methods: {
customEvent() {
this.$emit( custom-event , some value )
}
}
}<template>
<div>
<my-item v-for="(item, index) in list" @custom-event="customEvent(index, $event)">
</my-list>
</div>
</template>export default {
methods: {
customEvent(index, e) {
console.log(e) // some value
}
}
}例如，在頁面掛載時定義一個計時器，需要在頁面銷毀時清除定時器。這似乎不是問題。但仔細觀察，this.timer 的唯一目的是能夠在 beforeDestroy 中取得計時器編號，否則是無用的。
export default {
mounted() {
this.timer = setInterval(() => {
console.log(Date.now())
}, 1000)
},
beforeDestroy() {
clearInterval(this.timer)
}
}如果可能，最好只訪問生命週期掛鉤。這不是一個嚴重的問題，但可以認為是混亂。我們可以透過使用 或once 監聽頁面生命週期銷毀來解決這個問題：
export default {
mounted() {
this.creatInterval( hello )
this.creatInterval( world )
},
creatInterval(msg) {
let timer = setInterval(() => {
console.log(msg)
}, 1000)
this.$once( hook:beforeDestroy , function() {
clearInterval(timer)
})
}
}使用这种方法，即使我们同时创建多个定时器，也不影响效果。这是因为它们将在页面被销毁后以编程方式自动清除。8.监听组件生命周期通常我们使用 $emit 监听组件生命周期，父组件接收事件进行通知。
子组件
export default {
mounted() {
this.$emit( listenMounted )
}
}父组件
<template>
<div>
<List @listenMounted="listenMounted" />
</div>
</template>其实有一种简单的方法就是使用@hook 来监听组件的生命周期，而不需要在组件内部做任何改动。同样，创建、更新等也可以使用这个方法。
<template>
<List @hook:mounted="listenMounted" />
</template>以上是【整理分享】8 個實用Vue開發技巧的詳細內容。更多資訊請關注PHP中文網其他相關文章！
