您好,登錄后才能下訂單哦!
這篇文章主要講解了“Vue開發(fā)技巧實(shí)例代碼分析”,文中的講解內(nèi)容簡單清晰,易于學(xué)習(xí)與理解,下面請(qǐng)大家跟著小編的思路慢慢深入,一起來研究和學(xué)習(xí)“Vue開發(fā)技巧實(shí)例代碼分析”吧!
通常在組件中使用路由參數(shù),大多數(shù)人會(huì)做以下事情。
export default { methods: { getParamsId() { return this.$route.params.id } } }
在組件中使用 $route 會(huì)導(dǎo)致與其相應(yīng)路由的高度耦合,通過將其限制為某些 URL 來限制組件的靈活性。
正確的做法是通過 props 來解耦。
const router = new VueRouter({ routes: [{ path: /user/:id , component: User, props: true }] })
將路由的 props 屬性設(shè)置為 true 后,組件內(nèi)部可以通過 props 接收 params 參數(shù)。
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 }) }] })
功能組件是無狀態(tài)的,它不能被實(shí)例化,也沒有任何生命周期或方法。創(chuàng)建功能組件也很簡單,只需在模板中添加功能聲明即可。
它一般適用于只依賴于外部數(shù)據(jù)變化的組件,并且由于其輕量級(jí)而提高了渲染性能。
組件需要的一切都通過上下文參數(shù)傳遞。它是一個(gè)上下文對(duì)象,具體屬性見文檔。這里的 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: } } }
開發(fā)中修改第三方組件樣式很常見,但是由于scoped屬性的樣式隔離,可能需要去掉scoped或者另起一個(gè)樣式。這些做法有副作用(組件樣式污染,缺乏優(yōu)雅),在css預(yù)處理器中使用樣式滲透來生效。
我們可以使用 >>> 或者 /deep/ 來解決這個(gè)問題:
<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 在監(jiān)聽器屬性發(fā)生變化時(shí)觸發(fā),有時(shí)我們希望 watch 在組件創(chuàng)建后立即執(zhí)行。
可能想到的方式是在創(chuàng)建生命周期中調(diào)用它一次,但這不是一種優(yōu)雅的編寫方式,所以也許我們可以使用這樣的東西。
export default { data() { return { name: Joe } }, watch: { name: { handler: sayName , immediate: true } }, methods: { sayName() { console.log(this.name) } } }
Deep Listening
監(jiān)聽一個(gè)對(duì)象時(shí),當(dāng)對(duì)象內(nèi)部的屬性發(fā)生變化時(shí),watch是不會(huì)被觸發(fā)的,所以我們可以為它設(shè)置深度監(jiān)聽。
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)聽器執(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) } } }
watch 本身不能監(jiān)聽多個(gè)變量。但是,我們可以通過返回具有計(jì)算屬性的對(duì)象然后監(jiān)聽該對(duì)象來“監(jiān)聽多個(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 } } }
$event 是事件對(duì)象的一個(gè)特殊變量,它在某些場(chǎng)景下為我們提供了更多的可用參數(shù)來實(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 } } }
例如,在頁面掛載時(shí)定義一個(gè)定時(shí)器,需要在頁面銷毀時(shí)清除定時(shí)器。這似乎不是問題。但仔細(xì)觀察,this.timer 的唯一目的是能夠在 beforeDestroy 中獲取計(jì)時(shí)器編號(hào),否則是無用的。
export default { mounted() { this.timer = setInterval(() => { console.log(Date.now()) }, 1000) }, beforeDestroy() { clearInterval(this.timer) } }
如果可能,最好只訪問生命周期掛鉤。這不是一個(gè)嚴(yán)重的問題,但可以認(rèn)為是混亂。
我們可以通過使用 或once 監(jiān)聽頁面生命周期銷毀來解決這個(gè)問題:
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)樗鼈儗⒃陧撁姹讳N毀后以編程方式自動(dòng)清除。
通常我們使用 $emit 監(jiān)聽組件生命周期,父組件接收事件進(jìn)行通知。
子組件
export default { mounted() { this.$emit( listenMounted ) } }
父組件
<template> <div> <List @listenMounted="listenMounted" /> </div> </template>
其實(shí)有一種簡單的方法就是使用@hook 來監(jiān)聽組件的生命周期,而不需要在組件內(nèi)部做任何改動(dòng)。同樣,創(chuàng)建、更新等也可以使用這個(gè)方法。
<template> <List @hook:mounted="listenMounted" /> </template>
感謝各位的閱讀,以上就是“Vue開發(fā)技巧實(shí)例代碼分析”的內(nèi)容了,經(jīng)過本文的學(xué)習(xí)后,相信大家對(duì)Vue開發(fā)技巧實(shí)例代碼分析這一問題有了更深刻的體會(huì),具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云,小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章,歡迎關(guān)注!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。