«

Vue中加上key后会怎样

时间:2024-6-16 06:33     作者:韩俊     分类: Javascript


这篇文章主要介绍了Vue中加上key后会怎样的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇Vue中加上key后会怎样文章都会有所收获,下面我们一起来看看吧。

什么是Key

在Vue中,我们通常会使用

v-for
指令来渲染列表。 当数据源发生改变时,Vue会尽可能高效地更新DOM元素以反映这些变化。 然而,在某些情况下,Vue无法跟踪并处理到底哪些元素发生了变化。

当一个Vue组件的状态发生改变时,Vue会重新渲染组件反应出这些变化。 但是,如果这个Vue组件中包含列表,那么每次重新渲染时,都要重新创建这个列表。 当这个列表发生以下操作时,都会重新更新整个列表。 如果这个列表的数据量很大的时候,这样操作会极大影响性能。

    新增或删除列表项

    对比列表项发现位置已经变动

    通过第三方插件对列表进行操作

为了解决上述问题,Vue引入了一种特殊属性——

key

Key是用来追踪哪些元素被新增、被修改、被删除的辅助标识。在进行前后对比时, 会基于Key的变化判断是复用现有DOM节点还是销毁再重建,从而提高Vue的渲染效率和性能。

在Vue的虚拟DOM算法中,同级别的元素之间互相比较是按照它们的先后顺序进行遍历的。 如果可复用的元素没有设置Key,则会按照就近原则,配对成功后更新差异,这可能导致内部状态混乱。

key的作用

key属性用于标识一个元素的唯一性,当列表中的数据发生改变时,Vue会根据key值来对比哪些数据是新的,哪些数据是旧的, 从而渲染新的数据,而不用渲染整个列表。

    Key可以告诉Vue哪些元素是新增的,哪些元素已经不存在了,进而更好地掌握整个组件内部的状态。

    通过给每个元素添加key,Vue可以更加精确地知道哪些元素被修改了,减少内部状态混乱和无谓的DOM操作,从而提高性能。

举例

<template>
  <ul>
    <li v-for="item in items" :key="item.id">
      {{ item.name }}
    </li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: 'Apple' },
        { id: 2, name: 'Banana' },
        { id: 3, name: 'Orange' }
      ]
    };
  },
  mounted() {
    setInterval(() => {
      this.items.push({ id: Date.now(), name: 'New Item' });
    }, 1000);
  }
};
</script>

在这个例子中,我们使用

v-for
指令来渲染一个列表,并为每个列表项设置了一个key属性。 同时使用setInterval函数来定时添加新的列表项。

如果我们不使用key属性,那么每次添加新的列表项时,Vue都会重新渲染整个列表。 这样会导致性能问题,并且会破坏一些用户交互效果。 但是,如果我们使用key属性,Vue就可以根据每个列表项的唯一标识来判断哪些是新的,哪些是旧的。 这样就可以只更新需要更新的元素,而不是重新渲染整个列表。

key的底层原理

我们先来了解Vue中实现key的底层原理步骤:

    创建一份当前的虚拟DOM和上一次的虚拟DOM;

    在数据发生改变后,vue会通过比较新旧虚拟DOM的差异来计算出需要对哪些DOM元素进行何种类型的操作(新增、删除、移动等);

    如果某个元素上添加了key属性,在计算差异时vue就会将其作为参考,如果两次数据更新时,某个元素的key值没有发生变化,则代表这个元素没有发生位置变化,vue会直接复用它,而不是重新渲染。

修改上面的????

<template>
    <button @click="add">Add Fruit</button>
    <ul>
        <li v-for="item in items" :key="item.id">
            {{ item.name }}
        </li>
    </ul>
</template>
<script>
    data() {
    return {
        items: [
        { id: 1, name: 'Apple' },
        { id: 2, name: 'Banana' },
        { id: 3, name: 'Orange' }
        ]
    };
    },
    methods:{
    add(){
        const fruit = {'id':'4', 'name':'Chestnut'}
        this.items.unshift(fruit)
    }
}
</script>

当vue第一次渲染时,会根据

items
中的数据加载生成虚拟DOM,同时绑定key值,最后加载为以下的真实DOM节点。

<li key="1">Apple</li>
<li key="2">Banana</li>
<li key="3">Orange</li>

当我们点击

button
按钮后,
items
数据源发生变化,此时vue仍进行渲染,再次生成虚拟DOM,不过会对比上一次生成的虚拟DOM,最后根据绑定的key值重新渲染,加载为以下的真实DOM节点。

<li key="1">Apple</li>
<li key="2">Banana</li>
<li key="3">Orange</li>
<li key="4">Chestnut</li>

标签: javascript vue

热门推荐