vue key的原理和作用

1、虚拟dom中key的作用:

        key是虚拟dom对象的标识,当状态中的数据发生变化时,vue会根据新数据生成新的虚拟DOM,随后vue进行新虚拟dom和旧虚拟dom的差异对比。

2、对比规则:

        1)旧虚拟dom中找到了与新虚拟dom相同的key:

                若虚拟dom中内容没变,直接使用之前的真实dom

                若虚拟dom中内容变了,则生成新的真实dom,随后替换掉页面中之前的真实dom

        2)旧虚拟dom中未找到与虚拟dom相同的key

                创建新的真实dom,随后渲染到页面

  3、用index作为key可能会引发的问题:

        1、若对数据进行:逆序添加、逆序删除等破坏顺序的操作:

                会产生没有必要的真实dom更新 ==》界面效果没问题,但效率低

        2、如果结构中还包含输入类的dom:

                会产生错误的dom更新==》界面有问题

     4、开发中如何选择key?

                最好使用每条数据的唯一标识作为key

                如果不存在对数据的逆序添加、逆序删除等破坏操作,仅用于渲染列表展示,使用index没问题。

相关推荐

  1. Vue中key作用原理

    2024-05-05 05:54:06       33 阅读
  2. DNS背景工作原理作用

    2024-05-05 05:54:06       14 阅读
  3. hbase MultiRowRangeFilter原理作用实例

    2024-05-05 05:54:06       11 阅读
  4. vue key原理作用

    2024-05-05 05:54:06       7 阅读
  5. MybatisHibernate作用区别及底层原理分析

    2024-05-05 05:54:06       9 阅读

最近更新

  1. TCP协议是安全的吗?

    2024-05-05 05:54:06       18 阅读
  2. 阿里云服务器执行yum,一直下载docker-ce-stable失败

    2024-05-05 05:54:06       19 阅读
  3. 【Python教程】压缩PDF文件大小

    2024-05-05 05:54:06       18 阅读
  4. 通过文章id递归查询所有评论(xml)

    2024-05-05 05:54:06       20 阅读

热门阅读

  1. 函数的引用参数

    2024-05-05 05:54:06       7 阅读
  2. C# 中 IOC (Inversion of Control,控制反转)

    2024-05-05 05:54:06       9 阅读
  3. Oracle基础4

    2024-05-05 05:54:06       10 阅读
  4. 【小菜鸟之---Linux网络配置】

    2024-05-05 05:54:06       8 阅读