8 Tips for Vue to Read

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

When manipulating data, it is necessary to use the key attribute in conjunction with the v-for instruction 1 to keep the program constant and predictable. In this way, Vue can track the component state and have 1 constant reference to different elements. When using animations or Vue transformations, without key, Vue will only try to make DOM as efficient as possible. This may cause the elements in v-for to be out of order or behave unpredictably. If we have only one key reference for each element, we can better predict how exactly an Vue application will handle DOM operations.

2. Use the hump declaration props and use the dash name in the template to access props

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

3. Use dash names in events

When emitting a custom event, it is best to name it with a dash line, because in the parent component, we use the same syntax to listen for the event. So in order to ensure the uniformity between our components and make your code more readable, please insist on using dash names in both places.

4. Functional components

Functional components are stateless, they cannot be instantiated, and have no life cycle and methods. Creating functional components is also very simple, just adding functional declarations to the template. 1 is suitable for components that only depend on changes in external data. Because of its lightweight, rendering performance will also be improved. All the 1 cuts required by the component are passed through the context parameter. It is a context object, and the specific attributes view the document. Here props is an object that contains all the bound properties.

5. Reuse components of the same route

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

6. $createElement

1 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

Since Vue CLI 3 supports JSX by default, you can now write code using JSX. If you have not already used Vue CLI 3, you can use babel-plugin-transform-vue-jsx for JSX support.

8. Scope slot separates UI from business logic

We often want to reuse the business logic of a component, but when we don't want to use the UI of that component, we can use the scope slot to separate UI from the business logic. The general idea of scope slot is to hand over DOM structure to the caller to decide, and only pay attention to business logic within the component. Finally, data and events are passed to the parent component for processing and calling through the way of item = "item", thus realizing the separation of UI and business logic. Combined with rendering function, the effect without rendering components can be realized.

The above is the Vue will see the details of the 8 tips, more information about vue skills please pay attention to other related articles on this site!