8 tips for Vue that you will learn after reading it

1. Always use :key in v-for

Using the key attribute with the v-for directive is necessary to keep your program constant and predictable when you need to manipulate data. This way Vue can keep track of the component state and have a constant reference to the different elements. Without a key when using animations or Vue transitions, Vue will simply try to make the DOM as efficient as possible. This may cause the elements in v-for to appear out of order or behave in unpredictable ways. If we have unique key references to each element, we can better predict how exactly our Vue application will handle DOM operations.

2. Use camelCase to declare props and use hyphens to access props in templates

Best practice is just to follow the conventions of each language. In JS, camelCase declarations are the standard, in HTML, it's the hyphen. Vue already provides conversion between camelCase and dashCase declarations, so we don't have to worry about anything besides actually declaring them.

3. Use hyphens in event names

When emitting custom events, it is best to use a hyphen in the name 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 using hyphens in both places.

4. Functional Components

Functional components are stateless, they cannot be instantiated, and they do not have any life cycle or methods. Creating a functional component is also very simple. Just add a functional declaration to the template. It is generally suitable for components that only depend on changes in external data. Because of its light weight, rendering performance will also be improved. Everything a component needs is passed in via the context parameter. It is a context object, see the documentation for specific properties. Here props is an object containing all bound properties.

5. Reuse components with the same route

Developers often encounter situations where multiple routes resolve to the same Vue component. The problem is that Vue, for performance reasons, by default shared components will not re-render, and if you try to switch between routes that use the same component, nothing will change. If you still want to re-render these components, you can do so by providing a :key property in the router-view component.

6. $createElement

In general, each Vue instance has access to the $createElement method to create and return virtual nodes. For example, you can take advantage of this to use markup in a method that can be passed via the v-html directive. In a function component, this method can be accessed as the first argument in the render function.

7. Use JSX

Since Vue CLI 3 supports using JSX by default, you can now write your code using JSX. If you are not using Vue CLI 3 yet, you can use babel-plugin-transform-vue-jsx to get JSX support.

8. Scoped slots separate UI and business logic

We often want to reuse the business logic of a component, but do not want to use the UI of the component. We can use scoped slots to separate the UI and business logic. The general idea of ​​scoped slots is to leave the DOM structure to the caller to decide, and only focus on business logic within the component. Finally, data and events are passed to the parent component through :item = "item" for processing and calling, thus realizing the separation of UI and business logic. Combined with the rendering function, the effect of rendering-free components can be achieved.

The above is the detailed content of 8 small tricks of Vue that you will learn after reading it. For more information about Vue skills, please pay attention to other related articles on 123WORDPRESS.COM!