What is the important role of key in vue-JS Tutorial-php.cn

What is the important role of key in vue

王林

Release： 2021-05-03 16:55:47

forward

2853 people have browsed it

What is the important role of key in vue

1. Use key to manage reusable elements

1. The relevant examples are as follows:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>v-if-key</title>
    </head>
    <body>
        <div id="app">
            <template v-if="Input === &#39;username&#39;">
                <label>用户名：</label>
                <input placeholder="请输入你的用户名">
            </template>
            <template v-else>
                <label>邮箱：</label>
                <input placeholder="请输入你的邮箱">
            </template>
            <button v-on:click="changeInput">切换</button>
        </div>
        <script src="../../plugings/vue.js"></script>
        <script>
            var vm = new Vue({
                el: "#app",
                data: {
                    Input: "username",
                },
                methods: {
                    changeInput() {
                        if(this.Input === &#39;username&#39;) {
                            this.Input = &#39;email&#39;;
                        } else {
                            this.Input = &#39;username&#39;;
                        }
                    }
                }
            })
        </script>
    </body>
</html>

Copy after login

2. When entering the user name stage , after entering the relevant content, the relevant results are as follows:

What is the important role of key in vue

3. When the switch button is clicked, the relevant results are:

What is the important role of key in vue

4. From the above results, it can be observed that the content entered in the user name is displayed in the relevant input box of the mailbox after the relevant switching is performed.

5. The reason for the above situation:

Principle: In order to render elements as efficiently as possible in Vue, existing elements are usually reused instead of starting from scratch. Start rendering. Doing this can make Vue rendering more efficient.
Example analysis: The same element is used in the above examples. In order to improve rendering efficiency, Vue reuses the element, so related The input is not replaced during the switch, only its placeholder attribute is replaced.

(Free learning video sharing: javascript video tutorial)

6. Solution

Add a The key attribute with a unique value tells Vue that these two elements are completely independent and do not reuse them.

The relevant code after modification is:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>v-if-key</title>
    </head>
    <body>
        <div id="app">
            <template v-if="Input === &#39;username&#39;">
                <label>用户名：</label>
                <input placeholder="请输入你的用户名" key="username">
            </template>
            <template v-else>
                <label>邮箱：</label>
                <input placeholder="请输入你的邮箱" key="email">
            </template>
            <button v-on:click="changeInput">切换</button>
        </div>
        <script src="../../plugings/vue.js"></script>
        <script>
            var vm = new Vue({
                el: "#app",
                data: {
                    Input: "username",
                },
                methods: {
                    changeInput() {
                        if(this.Input === &#39;username&#39;) {
                            this.Input = &#39;email&#39;;
                        } else {
                            this.Input = &#39;username&#39;;
                        }
                    }
                }
            })
        </script>
    </body>
</html>

Copy after login

The key code is as follows:

What is the important role of key in vue

2. Reuse and reorder existing Element

1. The relevant sample code is as follows:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>v-for-key</title>
    </head>
    <body>
        <div id="app">
            <p>
                ID:<input type="text" v-model="bookId">
                书名：<input type="text" v-model="bookName">
                <input type="button" @click="add" value="增加">
            </p>
            <p v-for="item in items">
                <input type="checkbox">
                <span>ID：{{item.id}}, 书名：{{item.name}}</span>
            </p>
        </div>
        <script src="../../plugings/vue.js"></script>
        <script>
            var vm = new Vue({
                el: "#app",
                data: {
                    bookId: &#39;&#39;,
                    bookName: &#39;&#39;,
                    items: [
                        {id: 1, name: "1"},
                        {id: 2, name: "2"}
                    ]
                },
                methods: {
                    add() {
                        this.items.unshift({
                            id: this.bookId,
                            name: this.bookName
                        })
                        this.bookId = &#39;&#39;;
                        this.bookName = &#39;&#39;;
                    }
                }
            })
        </script>
    </body>
</html>

Copy after login

2. The relevant running result description

Select the sequence with ID 1 at the beginning

What is the important role of key in vue

After adding the relevant information of the book, the selected sequence becomes the sequence with ID 3

What is the important role of key in vue

3. The result is as shown above The reason

When Vue is updating a list of elements rendered using v-for, it defaults to using the "update in place" strategy. If the order of the data items is changed, Vue will not move the DOM elements to match the order of the data items, but will update each element in place and ensure that they render correctly at each index position.

4. Solution

Provide a unique key attribute for each item in the list.

What is the important role of key in vue

The final correct running result is as follows:

What is the important role of key in vue

Principle: Provide one for each item in the list The unique key attribute gives Vue a hint so that it can keep track of the identity of each node and thus reuse and reorder existing elements.

Note: The type of key attribute can only be string or number type.

Related recommendations: js tutorial

The above is the detailed content of What is the important role of key in vue. For more information, please follow other related articles on the PHP Chinese website!