分享 8 個(gè)實(shí)用的 Vue 開(kāi)發(fā)技巧
英文 | https://levelup.gitconnected.com/8-awesome-vue-development-tips-661b7631aa47
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.vueexport default {components: {List},{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)雅的編寫方式，所以也許我們可以使用這樣的東西。
export default {{return {name: Joe}},watch: {name: {handler: sayName ,immediate: true}},methods: {{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: {{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 } = thisreturn {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ò)使用 $on 或 $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>
總結(jié)
以上就是我今天跟你分享的8個(gè)關(guān)于Vue的開(kāi)發(fā)技巧，希望這些小技巧對(duì)你有用。
學(xué)習(xí)更多技能
請(qǐng)點(diǎn)擊下方公眾號(hào)
