Vueにおけるキーの重要な役割は何ですか-jsチュートリアル-php.cn

Vueにおけるキーの重要な役割は何ですか

王林

リリース： 2021-05-03 16:55:47

転載

2833 人が閲覧しました

Vueにおけるキーの重要な役割は何ですか

1. キーを使用して再利用可能な要素を管理する

1. 関連する例は次のとおりです:

<!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>

ログイン後にコピー

2. ユーザー名の段階に入るとき、関連する内容を入力すると、関連する結果は次のようになります:

Vueにおけるキーの重要な役割は何ですか

3. 切り替えボタンをクリックすると、関連する結果は次のようになります:

Vueにおけるキーの重要な役割は何ですか

4. 上記の結果から、該当の切り替えが行われた後、メールボックスの該当の入力ボックスにユーザー名に入力された内容が表示されていることがわかります。

5. 上記の状況の理由:

原則: Vue で要素をできるだけ効率的にレンダリングするために、通常、既存の要素は最初から開始するのではなく再利用されます。スクラッチ。レンダリングを開始します。これにより、Vue のレンダリングがより効率的になります。
分析例: 上記の例では同じ要素が使用されています。レンダリング効率を向上させるために、Vue は要素を再利用するため、関連性のある入力は切り替え中には置き換えられず、プレースホルダー属性のみが置き換えられます。

(無料の学習ビデオ共有: javascript ビデオチュートリアル)

6. 解決策

キー属性を追加します。 unique 値は、これら 2 つの要素が完全に独立しており、再利用しないことを Vue に伝えます。

変更後の関連コードは次のとおりです:

<!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>

ログイン後にコピー

キーコードは次のとおりです:

Vueにおけるキーの重要な役割は何ですか

2. 既存の要素 # を再利用し、並べ替えます。

##1. 関連するサンプルコードは次のとおりです:

<!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>

ログイン後にコピー

2. 関連する実行結果の説明

先頭に ID 1 を持つシーケンスを選択します

Vueにおけるキーの重要な役割は何ですか #書籍の関連情報を追加すると、選択した配列は ID 3

Vueにおけるキーの重要な役割は何ですか 3 の配列になり、結果は上のようになります。理由

Vue は、v-for を使用してレンダリングされた要素のリストを更新するときに、デフォルトで「その場で更新」戦略を使用します。データ項目の順序が変更された場合、Vue はデータ項目の順序に一致するように DOM 要素を移動しませんが、各要素をその場で更新し、各インデックス位置で正しくレンダリングされるようにします。

4. 解決策

リスト内の各項目に一意のキー属性を指定します。

Vueにおけるキーの重要な役割は何ですか最終的な正しい実行結果は次のとおりです。