Heim > Artikel > Web-Frontend > [Organisation und Freigabe] 8 praktische Vue-Entwicklungstipps
In diesem Artikel werden 8 großartige Vue-Entwicklungsfähigkeiten zusammengestellt und geteilt, darunter Routing-Parameter-Entkopplung, Funktionskomponenten, Stilumfang, erweiterte Verwendung von Watch, Watch-Überwachung mehrerer Variablen usw. Ich hoffe, dass er für alle hilfreich ist!
Normalerweise gehen die meisten Leute bei der Verwendung von Routenparametern in Komponenten wie folgt vor.
export default { methods: { getParamsId() { return this.$route.params.id } } }
Die Verwendung von $route in einer Komponente führt zu einer starken Kopplung an die entsprechende Route, wodurch die Flexibilität der Komponente durch die Beschränkung auf bestimmte URLs eingeschränkt wird. Der richtige Ansatz besteht darin, es durch Requisiten zu entkoppeln.
const router = new VueRouter({ routes: [{ path: /user/:id , component: User, props: true }] })
Nachdem das props-Attribut der Route auf true gesetzt wurde, kann die Komponente params-Parameter über props innerhalb der Komponente empfangen. [Verwandte Empfehlungen: vuejs-Video-Tutorial, Web-Front-End-Entwicklung]
export default { props: [ id ], methods: { getParamsId() { return this.id } } }
Sie können Requisiten auch über den Funktionsmodus zurückgeben.
const router = new VueRouter({ routes: [{ path: /user/:id , component: User, props: (route) => ({ id: route.query.id }) }] })
Funktionskomponente ist zustandslos, kann nicht instanziiert werden und verfügt über keinen Lebenszyklus oder Methoden. Das Erstellen funktionaler Komponenten ist ebenfalls so einfach wie das Hinzufügen einer funktionalen Deklaration zu Ihrer Vorlage. Es eignet sich im Allgemeinen für Komponenten, die nur auf externe Datenänderungen angewiesen sind, und verbessert aufgrund seines geringen Gewichts die Rendering-Leistung. Alles, was die Komponente benötigt, wird über Kontextparameter übergeben. Es handelt sich um ein Kontextobjekt. Informationen zu spezifischen Eigenschaften finden Sie in der Dokumentation. props ist hier ein Objekt, das alle gebundenen Eigenschaften enthält.
<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>
Die übergeordnete Komponente verwendet
<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: } } }
Es ist üblich, den Stil von Drittanbieterkomponenten während der Entwicklung zu ändern, aber aufgrund der Stilisolation des Bereichsattributs ist dies möglicherweise erforderlich Entfernen Sie den Gültigkeitsbereich oder erstellen Sie einen neuen Stil. Diese Praktiken haben Nebenwirkungen (Verschmutzung des Komponentenstils, Mangel an Eleganz) und werden mithilfe der Stildurchdringung im CSS-Präprozessor implementiert. Wir können>>> oder /deep/ verwenden, um dieses Problem zu lösen:
<style scoped> Outer layer >>> .el-checkbox { display: block; font-size: 26px; .el-checkbox__label { font-size: 16px; } } </style>rrree
<style scoped> /deep/ .el-checkbox { display: block; font-size: 26px; .el-checkbox__label { font-size: 16px; } } </style>
Deep Listening
Wenn sich beim Abhören eines Objekts die Eigenschaften innerhalb des Objekts ändern, wird die Uhr nicht ausgelöst, sodass wir Deep Listening dafür einstellen können. export default {
data() {
return {
name: Joe
}
},
watch: {
name: {
handler: sayName ,
immediate: true
}
},
methods: {
sayName() {
console.log(this.name)
}
}
}
Lösen Sie den Listener aus, um mehrere Methoden auszuführen
Mit Arrays können Sie mehrere Formen festlegen, einschließlich Zeichenfolgen, Funktionen und Objekte. export default {
data: {
studen: {
name: Joe ,
skill: {
run: {
speed: fast
}
}
}
},
watch: {
studen: {
handler: sayName ,
deep: true
}
},
methods: {
sayName() {
console.log(this.studen)
}
}
}
5.watch überwacht mehrere Variablen
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) } } }
6. Ereignisparameter $event
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 } } }
<template> <div> <input type="text" @input="inputHandler( hello , $event)" /> </div> </template>Benutzerdefiniertes Ereignis: Wird in einem benutzerdefinierten Ereignis dargestellt, um den von der untergeordneten Komponente ausgelösten Wert zu erfassen.
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>
7. Programmatischer Ereignis-Listener
export default { methods: { customEvent(index, e) { console.log(e) // some value } } }Es ist am besten, wenn möglich nur auf Lifecycle-Hooks zuzugreifen. Dies stellt kein ernstes Problem dar, kann jedoch als verwirrend angesehen werden. Wir können dieses Problem lösen, indem wir oder einmal verwenden, um auf die Zerstörung des Seitenlebenszyklus zu achten:
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>
Das obige ist der detaillierte Inhalt von[Organisation und Freigabe] 8 praktische Vue-Entwicklungstipps. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!