key值的作用

  1. 用于更快的更新虚拟dom

    在vue中,为了优化运行效率,vue使用了作为对象存在的虚拟dom.

    key值作为虚拟dom的识别符号存在用来更快的更新虚拟dom

    • 当存在key值,在视图更新时diff算法会更快的识别没有改变的元素 用以就地复用

    • 不存在key值时,diff算法会从头开始遍历识别没有改变的元素,当发现第一个改变的元素之后,其后面的所有元素都会重新渲染

  1. 用于标记动态路由,防止改变params时就地复用导致的部分生命周期函数无法触发的问题

    在使用动态路由的时候,因为vue的就地复用的机制导致vue不能完整的区分他们的不同,

    使得本来应该在初始化触发的cereated,monted等生命周期函数无法触发.

    添加key值后,vue能够正确的识别对应的params并且保留已经打开过的动态路由的数据并不会进入销毁阶段,也能够触发所有的生命周期函数.

  1. 用于标记v-if和v-else,使得vue能够识别,防止在切换时触发就地复用

    因为v-if切换标签时,多个相同的标签被渲染,如果不添加key来区分则会出现复用的情况。

  1. 用于标记v-for,在重复渲染时方便就地复用,提升效率

    在v-for遍历时,通常添加key值用于维护和可预测内部组件以及子类的状态,在重复渲染时触发就地复用以提高效率

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容