7個(gè)很棒的Vue開(kāi)發(fā)技巧分享
1.路由參數(shù)解耦
通常在組件中使用路由參數(shù)，大多數(shù)人會(huì)做以下事情。
export default {
methods: {
getParamsId() {
return this.$route.params.id
}
}
}
在組件中使用 $route 會(huì)導(dǎo)致與其相應(yīng)路由的高度耦合，通過(guò)將其限制為某些 URL 來(lái)限制組件的靈活性。正確的做法是通過(guò) props 來(lái)解耦。
const router = new VueRouter({
routes: [{
path: /user/:id ,
component: User,
props: true
}]
})
將路由的 props 屬性設(shè)置為 true 后，組件內(nèi)部可以通過(guò) props 接收 params 參數(shù)。
export default {
props: [ id ],
methods: {
getParamsId() {
return this.id
}
}
}
您還可以通過(guò)功能模式返回道具。
const router = new VueRouter({
routes: [{
path: /user/:id ,
component: User,
props: (route) => ({
id: route.query.id
})
}]
})
2.功能組件
功能組件是無(wú)狀態(tài)的，它不能被實(shí)例化，也沒(méi)有任何生命周期或方法。創(chuàng)建功能組件也很簡(jiǎn)單，只需在模板中添加功能聲明即可。它一般適用于只依賴于外部數(shù)據(jù)變化的組件，并且由于其輕量級(jí)而提高了渲染性能。組件需要的一切都通過(guò)上下文參數(shù)傳遞。它是一個(gè)上下文對(duì)象，具體屬性見(jiàn)文檔。這里的 props 是一個(gè)包含所有綁定屬性的對(duì)象。
<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:
}
}
}3.樣式范圍
開(kāi)發(fā)中修改第三方組件樣式很常見(jiàn)，但是由于scoped屬性的樣式隔離，可能需要去掉scoped或者另起一個(gè)樣式。這些做法有副作用（組件樣式污染，缺乏優(yōu)雅），在css預(yù)處理器中使用樣式滲透來(lái)生效。我們可以使用 >>> 或者 /deep/ 來(lái)解決這個(gè)問(wèn)題：
<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>
4.watch的高級(jí)使用
watch 在監(jiān)聽(tīng)器屬性發(fā)生變化時(shí)觸發(fā)，有時(shí)我們希望 watch 在組件創(chuàng)建后立即執(zhí)行?？赡芟氲降姆绞绞窃趧?chuàng)建生命周期中調(diào)用它一次，但這不是一種優(yōu)雅的編寫(xiě)方式，所以也許我們可以使用這樣的東西。
export default {
data() {
return {
name: Joe
}
},
watch: {
name: {
handler: sayName ,
immediate: true
}
},
methods: {
sayName() {
console.log(this.name)
}
}
}
Deep Listening
監(jiān)聽(tīng)一個(gè)對(duì)象時(shí)，當(dāng)對(duì)象內(nèi)部的屬性發(fā)生變化時(shí)，watch是不會(huì)被觸發(fā)的，所以我們可以為它設(shè)置深度監(jiān)聽(tīng)。
export default {
data: {
studen: {
name: Joe ,
skill: {
run: {
speed: fast
}
}
}
},
watch: {
studen: {
handler: sayName ,
deep: true
}
},
methods: {
sayName() {
console.log(this.studen)
}
}
}
觸發(fā)監(jiān)聽(tīng)器執(zhí)行多個(gè)方法
使用數(shù)組，您可以設(shè)置多個(gè)形式，包括字符串、函數(shù)、對(duì)象。
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)
}
}
}5.watch監(jiān)聽(tīng)多個(gè)變量
watch 本身不能監(jiān)聽(tīng)多個(gè)變量。但是，我們可以通過(guò)返回具有計(jì)算屬性的對(duì)象然后監(jiān)聽(tīng)該對(duì)象來(lái)“監(jiān)聽(tīng)多個(gè)變量”。
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
}
}
}
6.事件參數(shù)$event
$event 是事件對(duì)象的一個(gè)特殊變量，它在某些場(chǎng)景下為我們提供了更多的可用參數(shù)來(lái)實(shí)現(xiàn)復(fù)雜的功能。本機(jī)事件：與本機(jī)事件中的默認(rèn)事件對(duì)象行為相同。
<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
}
}
}
7.程序化事件監(jiān)聽(tīng)器
例如，在頁(yè)面掛載時(shí)定義一個(gè)定時(shí)器，需要在頁(yè)面銷毀時(shí)清除定時(shí)器。這似乎不是問(wèn)題。但仔細(xì)觀察，this.timer 的唯一目的是能夠在 beforeDestroy 中獲取計(jì)時(shí)器編號(hào)，否則是無(wú)用的。
export default {
mounted() {
this.timer = setInterval(() => {
console.log(Date.now())
}, 1000)
},
beforeDestroy() {
clearInterval(this.timer)
}
}
如果可能，最好只訪問(wèn)生命周期掛鉤。這不是一個(gè)嚴(yán)重的問(wèn)題，但可以認(rèn)為是混亂。我們可以通過(guò)使用 或once 監(jiān)聽(tīng)頁(yè)面生命周期銷毀來(lái)解決這個(gè)問(wèn)題：
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)
})
}
}
使用這種方法，即使我們同時(shí)創(chuàng)建多個(gè)定時(shí)器，也不影響效果。這是因?yàn)樗鼈儗⒃陧?yè)面被銷毀后以編程方式自動(dòng)清除。8.監(jiān)聽(tīng)組件生命周期通常我們使用 $emit 監(jiān)聽(tīng)組件生命周期，父組件接收事件進(jìn)行通知。
子組件
export default {
mounted() {
this.$emit( listenMounted )
}
}
父組件
<template>
<div>
<List @listenMounted="listenMounted" />
</div>
</template>
其實(shí)有一種簡(jiǎn)單的方法就是使用@hook 來(lái)監(jiān)聽(tīng)組件的生命周期，而不需要在組件內(nèi)部做任何改動(dòng)。同樣，創(chuàng)建、更新等也可以使用這個(gè)方法。
<template>
<List @hook:mounted="listenMounted" />
</template>到此這篇關(guān)于7個(gè)很棒的Vue開(kāi)發(fā)技巧分享的文章就介紹到這了,更多相關(guān)Vue開(kāi)發(fā)技巧內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
前端大文件上傳與下載(分片上傳)的詳細(xì)過(guò)程
最近遇見(jiàn)一個(gè)需要上傳超大大文件的需求,所以下面這篇文章主要給大家介紹了關(guān)于前端大文件上傳與下載(分片上傳)的詳細(xì)過(guò)程,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-11-11
這篇文章主要介紹了vue組件間通信全面講解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
vue監(jiān)視器@Watch創(chuàng)建執(zhí)行immediate方式
這篇文章主要介紹了vue監(jiān)視器@Watch創(chuàng)建執(zhí)行immediate方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-08-08
最近新做了個(gè)項(xiàng)目，前端使用的是目前很流行的前端框架，對(duì)于后端，本項(xiàng)目選擇的是比較好上手、輕量級(jí)的python后臺(tái)框架：Flask。感興趣的可以了解一下2021-05-05
vue實(shí)現(xiàn)大轉(zhuǎn)盤(pán)抽獎(jiǎng)功能
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)大轉(zhuǎn)盤(pán)抽獎(jiǎng)功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
這篇文章主要介紹了vue中輸入框事件的使用及數(shù)值校驗(yàn)方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)小購(gòu)物車功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-12-12
這篇文章主要為大家詳細(xì)介紹了Vue.js標(biāo)簽頁(yè)組件的使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一2019-10-10
vue中electron框架自定義外部配置文件的配置與讀取辦法
使用Electron開(kāi)發(fā)本地跨平臺(tái)的本地程序時(shí),有時(shí)需要添加一些程序的配置文件,下面這篇文章主要給大家介紹了關(guān)于vue中electron框架自定義外部配置文件的配置與讀取的相關(guān)資料,需要的朋友可以參考下2023-12-12
這篇文章主要介紹了vue路由插件之vue-route的相關(guān)知識(shí)，本文通過(guò)實(shí)例代碼給大家介紹了vue router的使用，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-06-06