1. Use a component in multiple routes
This is a very common situation that developers encounter where multiple routes are resolved to the same Vue component.
The problem, however, is that Vue optimizes your application and reuses existing components rather than creating new ones. So if you try to switch between routes that use the same component, nothing will change.
// router.js
const routes = [
{path: “/ a”.
component: MyComponent
},
Path: “/ b”,
];
To fix this, you need to add the :key attribute to the element — this might be in your app.vue file. This will help your router recognize when the page is different.
Now, your application will not reuse existing components and will update your content when you switch routes.
$on(‘ hook: ‘) can help simplify your code
Removing event listeners is a common practice in Javascript, as it helps to avoid memory leaks and prevent event collisions.
When adding/removing component event listeners in Vue, we use the life-cycle hooks Mounted and beforeDestroy, respectively. This is a typical setup.
Mounted () {window.addeventListener (‘ resize ‘, this.resizeHandler);
},
BeforeDestroy () {window. RemoveEventListener (‘ resize, enclosing resizeHandler);
}
In a typical pattern, we would have to declare these hooks separately in the component option object. One problem with this is that for larger components, these options can be hundreds of lines apart.
However, looking at the Vue documentation, we see that there is an instance method, $ON, that listens for instance events.
In addition, VueJS lifecycle hooks emit custom events when fired. The event name is “hook:” the name of hook+ itself (for example, hook: created)
Combining these two techniques, we can write code for adding and removing inside mount methods. The code looks something like this.
Enclosing $on (” hook: beforeDestroy “, () = > {window. The removeEventListener (‘ resize, enclosing resizeHandler);
})
This means we don’t have to define another lifecycle hook. Something that can greatly improve code readability.
$ON can also listen for child component lifecycle hooks
The fact that lifecycle hooks emit custom events means that the parent component can listen to the lifecycle hooks of its children.
It listens for events in normal mode (@event) and can be handled like any other custom event.
“Child – comp @ hook: mounted =” someFunction “/ >
4. Use immediate:true to trigger the observer during initialization
Vue Watchers is a good way to add advanced functionality, such as API calls, that runs when observed values change.
However, by default, the observer does not initiate the test run. Depending on your function, this may mean that some data is not fully initialized.
watch: { title: (newTitle, oldTitle) => { console.log(“Title changed from ” + oldTitle + ” to ” + newTitle)
}
If you need your observer to run immediately after instance initialization, all you have to do is convert your observer to an object with a handler (newVal, oldVal) and an immediate: true attribute.
The code might look like this.
title: { immediate: true,
handler(newTitle, oldTitle) { console.log(“Title changed from ” + oldTitle + ” to ” + newTitle)
}
5. You should always validate your props
Verifying props is one of the basic practices in Vue. It is even listed as A “Priority A: Basic” style rule in the official VueJS style guide.
Why is it important?
It can basically save the future you from the present. When designing large projects, it’s easy to forget the exact format, type, and other conventions you use for prop.
If you’re on a larger development team, your colleagues aren’t mind readers, so make sure they know how to use your components!
So let everyone not have to track your components to determine the format of the prop, and just write prop validation.
When designing large projects, it’s easy to forget the exact format, type, and other conventions you use for prop.
This is an example of prop validation in the VueJS Style guide.
props: { status: { type: String,
required: true,
validator: function (value) { return [
“Syncing”,
‘synced,
“Version – conflict”,
“Error”
].indexOf(value) ! = = 1
}
It is easy to pass all props to child components
Speaking of props, it is useful to know how to pass all props from the parent component to one of its children.
There are plenty of use cases, but it’s especially handy when your project has a very hierarchical structure.
It’s easy — you just need to remember your instance properties!
7. You must understand all component options
If you really want to become a VueJS developer, you need to understand all the different component options, when to use them, and why to use them.
You will. Don’t worry.
It just takes time, but after spending more and more time working in VueJS and committing to learning top tips, best practices, and new methods, you’ll soon become a super developer.
conclusion
This is by no means a complete list of VueJS techniques. These are just some of the techniques that I personally find most useful. Some of these tips are things I’ve been working on for a long time in Vue, so I’d like to share this knowledge with you.
Today’s love creation music education xiaobian to share here, want to learn front-end, understand more front-end knowledge, welcome everyone to focus on praise, private letter to me!! ———————————————— Copyright notice: This article is the original article of CSDN blogger “Love music Education Knowledge Express”, according to CC 4.0 BY-SA copyright agreement, please attach the original source link and this statement. The original link: blog.csdn.net/icktpxcls/a…