您现在的位置是:主页 > Web前端技术 > Web前端技术

vue中的key有什么用编程语言

IDCBT2021-12-24服务器技术人已围观

简介小编给大家分享一下vue中的key有什么用,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧! key到底有什么用途 ? 先来看官方解释 : key属性主要用在vue的 虚拟DOM算法

小编给大家分享一下vue中的key有什么用,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!

key到底有什么用途 ?

    先来看官方解释 :

      key属性主要用在vue的虚拟DOM算法(diff算法), 在新旧nodes对比时辨识VNodes

      不使用key时, Vue会使用一种最大限度减少动态元素并且尽可能的尝试就地修改/复用相同类型元素的算法

      使用key时, 它会基于key的变化重新排列元素顺序, 并且会移除/销毁key不存在的元素

      面对这些云里雾里的概念, 先不要急, 看一遍有个印象, 接下来一步步来深度解析key到底拿来干嘛。

      1 vnode 虚拟节点

      vnode : virtual node, 虚拟节点

      还记得DOM树中的要素吗 ? 文档, 元素, 节点

      那什么是虚拟节点呢 ?

      简单来说, 要被vue渲染到页面上的节点, 就是虚拟节点

        <template id="my-app">
          <div class="title" style="font-size: 30px; color: red;">哈哈哈</div>
        </template>

      这里的div就是一个虚拟节点, 在vue中, 它以这种形式存在

          const vnode = {
            type: "div",
            props: {
              class: "title",
              style: {
                "font-size": "30px",
                color: "red",
              },
            },
            children: "哈哈哈",
          };

      不理解的地方可能是children这个属性, 因为现在div没有子元素, 因此值仅仅为"哈哈哈", 若有子元素, 那么就会是一直套娃套下去, 套到最后一个结点为止, 如

            children: [
              {
                // 子元素
              },
              {
                // 子元素
              }
            ],

      2 vDOM 虚拟DOM

      和真实DOM一样, 有真实节点就有真实DOM, 那么有虚拟节点, 就有虚拟DOM

      当然虚拟DOM tree也一样咯, 也有叫VNode tree的, 一个意思, 这个不需要纠结, 大概是下面这样

      标签:

      很赞哦! ()

本栏推荐