Shulou(Shulou.com)06/03 Report--

This article mainly introduces "what are the tips of Vue". In daily operation, I believe many people have doubts about the tips of Vue. The editor consulted all kinds of materials and sorted out simple and easy-to-use methods of operation. I hope it will be helpful for you to answer the questions of "what are the tips of Vue?" Next, please follow the editor to study!

1. Always use `: key` in `v-for`

When you need to manipulate data, it is necessary to use the key attribute with the v-for instruction to keep the program constant and predictable. This allows Vue to track the state of the component and have a constant reference to different elements. When using animation or Vue transformations, without key, Vue will only try to make DOM as efficient as possible. This may cause elements in the v-for to be out of order or behave unpredictably. If we have a unique key reference for each element, we can better predict how the Vue application will handle DOM operations precisely.

two。 Declare props using a hump and use dash naming in the template to access props

The best practice is to follow the conventions of each language. In JS, the hump declaration is standard, and in HTML, it is named as a dash. Vue already provides conversion between hump declarations and dash naming, so we don't have to worry about anything other than actually declaring them.

3. Use dash naming in events

When issuing a custom event, it is best to use dash naming 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 dash naming in both places.

4. Functional component

Functional components are stateless, they cannot be instantiated, and there are no lifecycles and methods. Creating functional components is also easy, as long as you add a functional declaration to the template. It is generally suitable for components that only depend on changes in external data, and rendering performance will be improved because of its light weight. Everything the component needs is passed through the context parameter. It is a context object that views the document with specific properties. Where props is an object that contains all the bound properties.

5. Reuse components of the same route

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

6. $createElement

In general, each Vue instance can access the $createElement method to create and return virtual nodes. For example, you can use it to use tags in methods that can be passed through v-html instructions. In the function component, you can access this method as the first parameter in the rendering function.

7. Use JSX

Because Vue CLI 3 supports JSX by default, you can now write code in JSX. If you have not already used Vue CLI 3, you can use babel-plugin-transform-vue-jsx to get JSX support.

8. Scope slots realize the separation of UI and business logic

We often want to reuse the business logic of a component, but when we do not want to use the UI of that component, we can use scope slots to separate UI from business logic. The general idea of scope slot is to leave the DOM structure to the caller to decide, and only pay attention to the business logic within the component. Finally, the data and events are passed to the parent component to be processed and invoked by the way of item = "item", so as to realize the separation of UI and business logic. Combined with the rendering function, the effect without rendering components can be achieved.

At this point, the study of "what are the tips of Vue" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.