vue的key属性

m0_59259076

已于 2022-03-17 09:45:50 修改

阅读量814

点赞数

分类专栏：笔记文章标签： vue.js javascript ecmascript

于 2022-03-17 09:34:35 首次发布

原文链接：https://cn.vuejs.org/v2/guide/list.html#%E7%BB%B4%E6%8A%A4%E7%8A%B6%E6%80%81

版权

笔记专栏收录该内容

77 篇文章 0 订阅

订阅专栏

参考自vue官网、《Vue.js实战》梁灏

key属性是用来维护状态的

当 Vue 正在更新使用 v-for 渲染的元素列表时，它默认使用“就地更新”的策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序，而是就地更新每个元素，并且确保它们在每个索引位置正确渲染。这个类似 Vue 1.x 的 track-by="$index"。

这个默认的模式是高效的，但是只适用于不依赖子组件状态或临时 DOM 状态 (例如：表单输入值) 的列表渲染输出。

为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key attribute

vue官网也建议我们尽可能在使用 v-for 时提供 key 属性，除非遍历输出的 DOM 内容非常简单，或者是刻意依赖默认行为以获取性能上的提升。

因为它是 Vue 识别节点的一个通用机制，key 并不仅与 v-for 特别关联。后面我们将在指南中看到，它还具有其它用途。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="/js/vue.js"></script>
</head>
<body>
    <div id="app">
        <div v-if="loginType === 'username'">
            <label>Username:</label>
            <input type="text" placeholder="Enter your username" />
        </div>
        <div v-else>
            <label>Email:</label>
            <input type="text" placeholder="Enter your email address" />
        </div>
        <button type="button" @click="handleToggleClick">切换输入类型</button>
    </div>
</body>
<script>
    // 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
        el: '#app',
        data: {
            loginType: 'username'
        },
        methods: {
            add() {
                //注意这里是unshift
                this.list.unshift({ id: ++this.newId, name: this.name })
                this.name = ''
            },
            handleToggleClick() {
                this.loginType = this.loginType === 'username' ? 'Email' : 'username';
            }
        }
    });
</script>
</html>

当我们点击切换类型的时候：

很明显，vue帮我们把张三给带过来了，这不符合一些业务场景，比如切换登录。

如何才能避免这类问题呢？这时候key属性就派上用场了，修改代码如下:

    <div id="app">
        <div v-if="loginType === 'username'">
            <label>Username:</label>
            <input type="text" placeholder="Enter your username" :key="username-input" />
        </div>

        <div v-else>
            <label>Email:</label>
            <input type="text" placeholder="Enter your email address" :key="email-input" />
        </div>
        <button type="button" @click="handleToggleClick">切换输入类型</button>
    </div>

当我们再点击切换的时候，就不会出现以上的问题了~

m0_59259076

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue的key属性

key属性是用来维护状态的当 Vue 正在更新使用 v-for 渲染的元素列表时，它默认使用“就地更新”的策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序，而是就地更新每个元素，并且确保它们在每个索引位置正确渲染。
复制链接

扫一扫