寫在前面

使用v-for更新已渲染的元素串列時，默認用就地復用策略；串列資料修改的時候，它會根據key值去判斷某個值是否修改，如果修改，則重新渲染這一項，否則復用之前的元素；
我們在使用的時候經常會用index來作為key，但其實這不是一個好習慣，面試這樣說直接掛，講真，

例子

const list = [
    {
        id: 1,
        name: 'test1',
    },
    {
        id: 2,
        name: 'test2',
    },
    {
        id: 3,
        name: 'test3',
    },
]

上面這種是我們做專案中常用到的一種場景,因為不加key,vue現在直接報錯,所以我使用index作為key;下面列舉兩種常見的資料更新情況:

在最后一條資料后再加一條資料

const list = [
    {
        id: 1,
        name: 'test1',
    },
    {
        id: 2,
        name: 'test2',
    },
    {
        id: 3,
        name: 'test3',
    },
    {
        id: 4,
        name: '我是在最后添加的一條資料',
    },
]

此時前三條資料直接復用之前的,新渲染最后一條資料,此時用index作為key,沒有任何問題;

在中間插入一條資料

const list = [
    {
        id: 1,
        name: 'test1',
    },
    {
        id: 4,
        name: '我是插隊的那條資料',
    }
    {
        id: 2,
        name: 'test2',
    },
    {
        id: 3,
        name: 'test3',
    },
]

資料變化如下


key: 0  index: 0 name: test1     key: 0  index: 0 name: test1
key: 1  index: 1 name: test2     key: 1  index: 1 name: 我是插隊的那條資料
key: 2  index: 2 name: test3     key: 2  index: 2 name: test2
                                 key: 3  index: 3 name: test3