1. Always use `:key` in `v-for`
When data manipulation is required, it is necessary to use the key attribute with the v-for directive to keep the program constant and predictable. This way Vue can track component state and have a constant reference to different elements. When using animations or Vue conversions, Vue will only try to make the DOM as efficient as possible without a key. This may cause elements in v-for to be out of order or behave unpredictably. If we have a unique key reference to each element, we can better predict how exactly Vue applications will handle DOM operations.
2. Use camel to declare props and use short horizontal line naming in the template to access props
Best practices are just to follow the conventions in each language. In JS, camel declarations are standard, and in HTML, short horizontal line naming. Vue already provides conversion between camel declarations and short horizontal naming, so we don't have to worry about anything other than actually declaring them.
3. Use short horizontal lines to naming in events
When issuing a custom event, it is best to use short horizontal lines to name it because in the parent component we use the same syntax to listen for the event. So to ensure consistency between our components and make your code more readable, please stick to short horizontal naming in both places.
4. Functional Components
Functional components are stateless, they cannot be instantiated, without any life cycles and methods. Creating functional components is also very simple, you just need to add a functional declaration to the template. Generally suitable components that only rely on changes in external data, because their light weight will improve rendering performance. Everything a component needs is passed through the context parameter. It is a context object with specific properties viewed on the document. Here props is an object containing all bound properties.
5. Reuse components with the same route
Development partners often encounter multiple routes resolved to the same Vue component. The problem is that Vue shared components will not be rerendered by default for performance reasons, and nothing changes will happen if you try to switch between routes using the same components. If you still want to rerender these components, you can do so by providing the :key property in the router-view component.
6. $createElement
Generally, each Vue instance can access the $createElement method to create and return virtual nodes. For example, it can be leveraged to use tags in methods that can be passed through v-html directives. In the function component, this method can be accessed as the first parameter in the rendering function.
7. Using JSX
Since Vue CLI 3 supports JSX by default, you can now write code using JSX. If Vue CLI 3 is not used yet, you can use babel-plugin-transform-vue-jsx to get JSX support.
8. Scoping slots realize the separation of UI and business logic
We often want to reuse the business logic of a component, but when we don't want to use the UI of the component, we can use scoped slots to separate the UI and business logic. The general idea of scope slots is to hand over the DOM structure to the caller for decision. The component only focuses on business logic, and finally passes data and events to the parent component for processing and calling through :item ="item" to achieve the separation of UI and business logic. Combined with the rendering function, the effect of rendering without rendering components can be achieved.
The above is the detailed content of 8 tips that Vue will know after reading. For more information about vue skills, please follow my other related articles!