1. Routing parameter decoupling
Typically when using route parameters in components, most people do the following.
export default {
methods: {
getParamsId() {
return this.$route.params.id
}
}
}Using $route in a component results in a strong coupling to its corresponding route, limiting the flexibility of the component by restricting it to certain URLs. The correct approach is to decouple it through props.
const router = new VueRouter({
routes: [{
path: /user/:id ,
component: User,
props: true
}]
})After setting the route's props attribute to true, the component can receive params parameters through props inside the component.
export default {
props: [ id ],
methods: {
getParamsId() {
return this.id
}
}
}You can also return props via functional mode.
const router = new VueRouter({
routes: [{
path: /user/:id ,
component: User,
props: (route) => ({
id: route.query.id
})
}]
})2. Functional components
A functional component is stateless, it cannot be instantiated and does not have any lifecycle or methods. Creating functional components is also as simple as adding a functional declaration to your template. It is generally suitable for components that only rely on external data changes, and improves rendering performance due to its lightweight. Everything the component needs is passed through context parameters. It is a context object, see the documentation for specific properties. Props here is an object containing all bound properties.
<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>The parent component uses
<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. Range of styles
It is common to modify the style of third-party components during development, but due to the style isolation of scoped attributes, you may need to remove scoped or create a new style. These practices have side effects (component style pollution, lack of elegance), and are implemented using style penetration in the CSS preprocessor. 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>4. Advanced use of watch
The watch is triggered when the listener property changes. Sometimes we want the watch to be executed immediately after the component is created. Probably the way that comes to mind is to call it once during the creation lifecycle, but that's not an elegant way to write it, so maybe we can use something like this.
export default {
data() {
return {
name: Joe
}
},
watch: {
name: {
handler: sayName ,
immediate: true
}
},
methods: {
sayName() {
console.log(this.name)
}
}
}When Deep Listening monitors an object, when the properties inside the object change, watch will not be triggered, 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() {
console.log(this.studen)
}
}
}To trigger the listener to execute multiple methods using an array, you can set multiple forms, including strings, functions, and objects.
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 monitors multiple variables
watch itself cannot monitor multiple variables. However, we can "listen to multiple variables" by returning an object with a computed property 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) {
console.log( msg1 is change )
}
if (newVal.msg2 != oldVal.msg2) {
console.log( msg2 is change )
}
},
deep: true
}
}
}6. Event parameters $event
$event is a special variable of the event object, which provides us with more available parameters to implement complex functions in certain scenarios. Native Events: Behaves 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) {
console.log(e.target.value)
}
}
}Custom events: Represented in custom events as capturing values thrown from child components.
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. 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 look carefully, the only purpose of this.timer is to be able to get the timer number in beforeDestroy, otherwise it is useless.
export default {
mounted() {
this.timer = setInterval(() => {
console.log(Date.now())
}, 1000)
},
beforeDestroy() {
clearInterval(this.timer)
}
}It's best to only access lifecycle hooks if possible. This is not a serious problem but can be considered confusing. We can solve this problem by using or once to listen for page life cycle destruction:
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)
})
}
}Using this method, even if we create multiple timers at the same time, the effect will not be affected. This is because they will be automatically cleared programmatically after the page is destroyed. 8. Monitor the component life cycle. Usually we use $emit to monitor the component life cycle, and the parent component receives event notifications. Subassembly
export default {
mounted() {
this.$emit( listenMounted )
}
}parent component
<template>
<div>
<List @listenMounted="listenMounted" />
</div>
</template>In fact, there is a simple way to use @hook to monitor the life cycle of the component without making any changes inside the component. Similarly, creation, update, etc. can also use this method.
<template>
<List @hook:mounted="listenMounted" />
</template>In summary , the above are the 8 development tips about Vue that I shared with you today. I hope these tips are useful to you.
English:
https://levelup.gitconnected.com/8-awesome-vue-development-tips-661b7631aa47