Vue中key的作用

前端开发作者： 2024-08-21 15:45:01

Vue中key的作用 key的特殊attribute主要用在Vue的虚拟DOM算法，在新旧Nodes对比时辨识VNodes。如果不使用key，Vue会使用一种最大限度减少动态元素并且尽可能的尝试就地修

Vue中key的作用

<!DOCTYPE html>
<html>
<head>
    <title>Vue</title>
</head>
<body>
    <div id="app">
        <ul>
            <li v-for="item in simpleListWithoutKey" >{{item}}</li>
        </ul>

        <ul>
            <li v-for="item in simpleListWithKey" :key="item" >{{item}}</li>
        </ul>

        <ul>
            <li v-for="item in complexListWithoutKey">
                <span v-for="value in item.list" v-if="value > 5">{{value}}</span>
            </li>
        </ul>

        <ul>
            <li v-for="item in complexListWithKey" :key="item.id">
                <span v-for="value in item.list" :key="value" v-if="value > 5">{{value}}</span>
            </li>
        </ul>

    </div>
</body>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el: '#app',data: {
            simpleListWithoutKey: [1,2,3,4,5,6],simpleListWithKey: [1,complexListWithoutKey:[
                {id: 1,list: [1,3]},{id: 2,list: [4,6]},{id: 3,list: [7,8,9]}
            ],complexListWithKey:[
                {id: 1,}
    })
</script>
</html>

简单列表

// 没有key的情况下
console.time();
vm.simpleListWithoutKey = [5,6,7,9,10,11,12];
vm.$nextTick(() => console.timeEnd());
// default: 2.193056640625ms

// 存在key的情况下
console.time();
vm.simpleListWithKey = [5,12];
vm.$nextTick(() => console.timeEnd());
// default: 3.2138671875ms

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>就地复用</title>
</head>
<body>

  <div id="app">
    <h3>采用就地复用策略(vuejs默认情况)</h3>
    <div  v-for='(p,i) in persons'>
      <span>{{p.name}}<span>  
      <input type="text"/>  
      <button @click='down(i)' v-if='i != persons.length - 1'>下移</button>
    </div> 

    <h3>不采用就地复用策略(设置key)</h3>
    <div  v-for='(p,i) in persons' :key='p.id'>
      <span>{{p.name}}<span> 
      <input type="text"/>  
      <button @click='down(i)' v-if='i != persons.length - 1'>下移</button>
    </div>

  </div>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
  <script>
    new Vue({
      el: '#app',data: {
        persons: [
            { id: 1,name: 'A' },{ id: 2,name: 'B' },{ id: 3,name: 'C' }
        ]
      },mounted: function(){
        // 此DOM操作将两个A的颜色设置为红色 主要是为了演示原地复用
        document.querySelectorAll("h3 + div > span:first-child").forEach( v => v.style.color="red");
      },methods: {
        down: function(i) {
            if (i == this.persons.length - 1) return;
          var listClone = this.persons.slice();
          var one = listClone[i];
          listClone[i] = listClone[i + 1];
          listClone[i + 1] = one;
          this.persons = listClone;
        }
      }
    });
  </script>
</body>
</html>
<!-- 源于 https://www.zhihu.com/question/61078310 @霸都丶傲天 有修改-->

复杂列表

console.time();
vm.complexListWithoutKey = [
        {id: 3,9]},{id: 1,];
vm.$nextTick(() => console.timeEnd());
vm.$nextTick(() => console.timeEnd());
// default: 4.100244140625ms

console.time();
vm.complexListWithKey = [
        {id: 3,];
vm.$nextTick(() => console.timeEnd());
// default: 3.016064453125ms

https://github.com/WindrunnerMax/EveryDay

https://cn.vuejs.org/v2/api/#key
https://www.jianshu.com/p/4bdd2690859c
https://www.zhihu.com/question/61078310
https://segmentfault.com/a/1190000012861862
https://www.cnblogs.com/zhumingzhenhao/p/7688336.html
https://blog.csdn.net/hl18730262380/article/details/89306500
https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/1
https://cn.vuejs.org/v2/guide/list.html#%E7%BB%B4%E6%8A%A4%E7%8A%B6%E6%80%81

原创声明

本站部分文章基于互联网的整理，我们会把真正“有用/优质”的文章整理提供给各位开发者。本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。

本文链接：http://www.jiecseo.com/news/show_66167.html