1. Decoupling of routing parameters
Usually using routing parameters in components, most people will do the following.
export default {
methods: {
getParamsId() {
return this.$
}
}
}Using $route in a component results in a high degree of coupling to its corresponding route, limiting the flexibility of the component by limiting it to certain URLs.
The correct way to do this is to decouple through props.
const router = new VueRouter({
routes: [{
path: /user/:id ,
component: User,
props: true
}]
})After setting the props property of the route to true, the params parameter can be received through props within the component.
export default {
props: [ id ],
methods: {
getParamsId() {
return
}
}
}You can also return to props through functional mode.
const router = new VueRouter({
routes: [{
path: /user/:id ,
component: User,
props: (route) => ({
id:
})
}]
})2. Functional components
Functional components are stateless, they cannot be instantiated, and they do not have any life cycles or methods. Creating functional components is also simple, just add a functional declaration to the template.
It is generally suitable for components that rely only on external data changes and improves rendering performance due to its lightweight.
Everything a component needs is passed through context parameters. It is a context object, and the specific properties are shown in the documentation. Here props is an object containing all bound properties.
<template functional>
<div class="list">
<div class="item" v-for="item in " :key="" @click="(item)">
<p>{{}}</p>
<p>{{}}</p>
</div>
</div>
</template>Parent component usage
<template>
<div>
<List :list="list" :itemClick="item => (currentItem = item)" />
</div>
</template>import List from @/components/
export default {
components: {
List
},
data() {
return {
list: [{
title: title ,
content: content
}],
currentItem:
}
}
}3. Style range
It is common to modify third-party component styles in development, but due to the style isolation of scoped attributes, you may need to remove scoped or start a new style. These practices have side effects (component style contamination, lack of elegance), and use style penetration in the css preprocessor to take effect.
We can use >>> or /deep/ to solve this problem:
<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>Advanced use
Watch fires when the listener properties change, and sometimes we want the watch to be executed immediately after the component is created.
The way that might come to mind is to call it once in the creation lifecycle, but it's not an elegant way to write, so maybe we can use something like this.
export default {
data() {
return {
name: Joe
}
},
watch: {
name: {
handler: sayName ,
immediate: true
}
},
methods: {
sayName() {
()
}
}
}Deep Listening
When listening for an object, the watch will not be triggered when the properties inside the object change, so we can set deep listening for it.
export default {
data: {
studen: {
name: Joe ,
skill: {
run: {
speed: fast
}
}
}
},
watch: {
studen: {
handler: sayName ,
deep: true
}
},
methods: {
sayName() {
()
}
}
}Trigger the listener to execute multiple methods
Using arrays, you can set multiple forms, including strings, functions, objects.
export default {
data: {
name: Joe
},
watch: {
name: [
sayName1 ,
function(newVal, oldVal) {
this.sayName2()
},
{
handler: sayName3 ,
immaediate: true
}
]
},
methods: {
sayName1() {
( sayName1==> , )
},
sayName2() {
( sayName2==> , )
},
sayName3() {
( sayName3==> , )
}
}
}Listen to multiple variables
watch itself cannot listen to multiple variables. However, we can "listen to multiple variables" by returning an object with computed properties and then listening to that object.
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) {
( msg1 is change )
}
if (newVal.msg2 != oldVal.msg2) {
( msg2 is change )
}
},
deep: true
}
}
}6. Event parameter $event
$event is a special variable of the event object, which provides us with more available parameters to implement complex functions in some scenarios.
Native Events: Behave the same as the default event object in native events.
<template>
<div>
<input type="text" @input="inputHandler( hello , $event)" />
</div>
</template>export default {
methods: {
inputHandler(msg, e) {
()
}
}
}Custom Event: Denoted in a custom event as capturing the value thrown from a child component.
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) {
(e) // some value
}
}
}7. Programmatic event listener
For example, define a timer when the page is mounted, and the timer needs to be cleared when the page is destroyed. This doesn't seem to be a problem. But looking closely, the only purpose is to be able to get the timer number in beforeDestroy, otherwise it would be useless.
export default {
mounted() {
= setInterval(() => {
(())
}, 1000)
},
beforeDestroy() {
clearInterval()
}
}If possible, it is better to access only the lifecycle hook. This is not a serious problem, but it can be considered confusion.
We can solve this problem by using or once listen page lifecycle destruction:
export default {
mounted() {
( hello )
( world )
},
creatInterval(msg) {
let timer = setInterval(() => {
(msg)
}, 1000)
this.$once( hook:beforeDestroy , function() {
clearInterval(timer)
})
}
}Using this method, even if we create multiple timers at the same time, it will not affect the effect. This is because they will be automatically cleared programmatically after the page is destroyed.
8. Listen to component life cycle
Usually we use $emit to listen for component life cycle, and the parent component receives events for notification.
Subcomponents
export default {
mounted() {
this.$emit( listenMounted )
}
}Parent component
<template>
<div>
<List @listenMounted="listenMounted" />
</div>
</template>In fact, there is an easy way to use @hook to listen to the life cycle of a component without making any changes inside the component. Similarly, this method can be used for creation, update, etc.
<template>
<List @hook:mounted="listenMounted" />
</template>Summarize
The above are 8 development tips about Vue that I shared with you today. I hope these tips will be useful to you.
This is the end of this article about eight Vue development techniques that you think are great at first glance. For more related Vue development techniques, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!