What is the purpose of v-bind:key binding?

ide/components.html-sharp%E5%8A%A8%E6%80%81%E7%BB%84%E4%BB%B6" rel=" nofollow noreferrer "> https://cn.vuejs.org/v2/guide.
the example here is changed to the following:

    <style>
    -sharpdemo,
    .demo,
    .content .demo {
        border: 1px solid rgb(238, 238, 238);
        border-radius: 2px;
        padding: 25px 35px;
        margin-top: 1em;
        margin-bottom: 40px;
        font-size: 1.2em;
        line-height: 1.5em;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        overflow-x: auto;
    }

    -sharpdemo> :first-child,
    .demo> :first-child,
    .content .demo> :first-child {
        margin-top: 0;
    }

    .dynamic-component-demo-tab-button {
        padding: 6px 10px;
        border-top-left-radius: 3px;
        border-top-right-radius: 3px;
        border: 1px solid rgb(204, 204, 204);
        cursor: pointer;
        background: rgb(240, 240, 240);
        margin-bottom: -1px;
        margin-right: -1px;
    }

    .dynamic-component-demo-tab-button-active {
        background: rgb(224, 224, 224);
    }
    </style>
</head>

<body>
 
    <!--   -->
    <div id="dynamic-component-demo" class="demo">
        <button v-for="tab,index in tabs"
        class="dynamic-component-demo-tab-button"
        :class="{"dynamic-component-demo-tab-button-active": tab === currentTab }"
        @click="currentTab = tab">   
      {{ tab }}
        </button>
        <component :is="currentTabComponent" class="dynamic-component-demo-tab">
        </component>
    </div>
    <script type="text/javascript">
    var tabHome = {
        template: ` Home component   `
    }
    var tabPosts = {
        template: ` Posts component   `
    }
    var tabArchive = {
        template: ` Archive component   `
    }
    var app = new Vue({
        el: "-sharpdynamic-component-demo",
        data: {
            tabs: ["Home", "Posts", "Archive"],
            currentTab: "Home",
        },
        components: {
            "tab-home": tabHome,
            "tab-posts": tabPosts,
            "tab-archive": tabArchive,
        },
        computed: {
            currentTabComponent: function() {
                return "tab-" + this.currentTab.toLowerCase()
            }
        }
    });
    </script>

The inconsistency between

and the original text is that the

on the button is removed.

vMaibindVue = "tab"

through h ide/list.html-sharp%E4%B8%80%E4%B8%AA%E5%AF%B9%E8%B1%A1%E7%9A%84-v-for" rel=" nofollow noreferrer "> https://cn.vuejs.org/v2/guide., we learned that when v-for does list rendering, there are three parameters (value,key,index) that represent the values of object attributes. The index of the property name and key-value pair of the object. The tabs: ["Home"," Posts", "Archive"] in the dynamic components of the official website is just a normal array of strings.
so, what is the use of this setting in the dynamic array where vmurbindvir key = "tab" has been set.

Vue.js

Mar.22,2021