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

This article introduces the relevant knowledge of "what are the list rendering methods of Vue". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

1. V-for: traverse the contents of the array (commonly used)

In can also be replaced by of

{{p.name}}-{{p.age}} Vue.config.produnctionTps=false new Vue ({el: "# div1", data: {persons: [{id:'001',name: "Zhang", age:18}) {id:'002',name: "Li", age:19}, {id:'002',name: "Liu", age:17} ]}}) 2. V-for: traversing object properties (commonly used) {{p}}-{{I}} Vue.config.produnctionTps=false new Vue ({ El: "# div1" Data: {persons: {name: "Zhang", age:18}) 3. Traversal string (rarely used) {{p}}-{{I}} Vue.config.produnctionTps=false new Vue ({el: "# div1" Data: {str: "abcde"}) 4. Traversing a specified number of times (not commonly used) {{p}}-- the function and principle of {{I}} 5.key

The index is used as the key in all above, but it will make an error if you modify the dom and have input content in the breaking order. Index can be used as key only when used to render a page without modifying the page.

It is strongly recommended to use the unique identification of data, such as id, mobile phone number and mailbox number as key.

1. The role of key in virtual DOM:

Key is the identity of a virtual DOM object. When the data changes, Vue will generate [new virtual DOM] based on [new data]. Then Vue compares the difference between "new virtual DOM" and "old virtual DOM". The comparison rules are as follows:

two。 Comparison rules:

(1)。 The same key as the new virtual DOM was found in the old virtual DOM:

1. If the content in the simulated DOM remains the same, directly use the previous real DOM!

two。 If the content in the simulated DOM changes, a new real DOM is generated, and then the previous real DOM in the page is replaced.

(2)。 The same key as the new virtual DOM was not found in the old virtual DOM to create a new real DOM, which is then rendered to the page.

3. Problems that may arise when using index as a key:

1. If the data is added or deleted in reverse order, the sequence is broken:

It will result in unnecessary real DOM updates = > the interface effect is fine, but it is inefficient.

two。 If the structure also contains the DOM of the input class:

There is an error DOM update = = > there is a problem with the interface.

4. How to choose key in development?

1. It is best to use the unique identification of each piece of data as the key, such as id, mobile phone number, ID number, student number and other unique values.

two。 If there are no disruptive operations such as adding or deleting data in reverse order, it is only used for rendering list for display, and there is no problem with using index as key.

This is the end of the content of "what are the list rendering methods of Vue". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

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.