Vue学习笔记20--key的原理

react、vue中key的作用(key的原理？)：

虚拟DOM中key的作用：
- key是虚拟DOM对象的标识，当张贴中的数据发生变化时，vue会根据--新数据，生成新的虚拟DOM，随后vue进行新虚拟DOM与旧虚拟DOM的差异比较。
- 比较规则如下：
对比规则
1. 旧虚拟DOM中找到了与新虚拟DOM相同的key
  - 若虚拟DOM中内容没变，直接使用之前的真实DOM
  - 若虚拟DOM中内容变了，则生成新的真实DOM，随后替换掉页面中之前的真实DOM
2. 旧虚拟DOM中没有找到与新虚拟DOM相同的key
  - 创建新的真实DOM，随后渲染到页面
用index作为key可能引发的问题
- 若对数据进行：逆序添加、逆序删除等破坏顺序操作——会产生没有必要的真实DOM更新(界面效果没问题，但效率低)
- 如果结构中还包含输入类的DOM：会产生错误DOM更新(界面会有问题)
开发中如何选择key
- 最好使用每条数据的唯一标识作为key，比如：id或其他主键列
- 如果不存在对数据的逆序添加、逆序删除等破坏操作，仅用于渲染列表用于展示，则使用index作为key是没有问题的。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>key的原理</title>
  <script type="text/javascript" src="../Js/vue.js"></script>
</head>

<body>
  <div id="root">
    <h2>人员列表信息(遍历数组)：</h2>
    <hr>
    <h2 style="color: burlywood;">
      1.:key="p.id"，表示动态属性，动态绑定唯一标识(注：建议应始终存在该属性的设置)<br />
      2.写法<br />
      v-for="p in personList" :key="p.id" ==> v-for="(p,index) in personList" :key="index"<br />
      v-for指令<br />
      1.用于展示列表数据<br />
      2.语法：v-for="(item,index) in objXXX" :key="xxx"<br />
      3.可遍历：数组、对象、字符串(使用较少)、指定次数(使用较少)<br />
      4.强烈建议使用语法：v-for="p in personList" :key="p.id"<br />

    </h2>
    <hr>
    <button @click.once="add">新增人员</button>
    <!-- 遍历数组 -->
    <ul>
      <!-- <li v-for="p in personList" :key="p.id">
        {{p.id}}-{{p.name}}-{{p.age}}
      </li>
      <hr> -->
      <li v-for="(p,index) in personList" :key="index">
        {{p.id}}-{{p.name}}-{{p.age}}-{{index}}
      </li>
    </ul>
    <hr>
  </div>
</body>

</html>
<script type="text/javascript">
  Vue.config.productionTip = false
  const vm = new Vue({
    el: '#root',
    data: {
      personList: [
        { id: '001', name: '乔峰', age: 28 },
        { id: '002', name: '虚竹', age: 25 },
        { id: '003', name: '段誉', age: 22 },
      ],

    },
    methods:
    {
      add () {
        const p = { id: '004', name: '扫地僧', age: 65 }
        // this.personList.unshift(p)//新增带第一个 索引0的位置
        this.personList.push(p)//新增
      }
    }


  })
</script>

pop（）从数组最后一个元素开始删除

shift（）从数组第一个元素开始删除

splice（）从数组指定的元素开始删除

posted on 2024-02-28 14:28 sunwugang 阅读(27) 评论(0) 收藏举报

刷新页面返回顶部

欢迎莅临 SUN WU GANG 的园子！！！

公告