Blazor和Vue对比学习（小知识点-3）：key属性/指令，组件唯一标识

Vue和Blazor的组件都有key属性，两者的作用和原理基本一致，语法上有一点点差异，如下所示

//Vue中使用key===============================
//key在ul上绑定，使用v-bind指令（简写为冒号）
<ul v-for=”people in peoples” :key=”people.id”>
    <li>{{people.name}}</li>
</ul>



//Blazor中使用key=============================
//key在li上绑定，是一个指令
<ul>
    @foreach(var people in peoples){
        <li @key=”people.Id”>@people.Name<li>
    }
</ul>

 

 

组件的key属性，作为组件的唯一标识，在进行列表渲染时，如果列表有重排的情况，可以大大提高渲染性能。如果列表中有表单组件，还可以防止列表重排时出现表单组件的错位。

Vue和Blazor的组件渲染，都是基于虚拟DOM的差量算法。虚拟DOM中，默认会给每个每个元素节点一个key值，状态有更新时，根据这个key值去对比节点前后状态是否有变化，有变化时，才去更新页面的相应的DOM。而对于列表元素，默认按照“就地更新”的策略，当数据项的顺序改变时，并不会去移动DOM元素的顺序。我们通过以下例子来具体说明：

 

1、使用默认key，列表元素顺序未发生变化时：

①有一个元素列表，值为年龄：

张三（16岁），李四（18岁），王五（17岁）

②DOM中默认赋节点key值：

张三（16岁）-0，李四（18岁）-1，王五（17岁）-2

③李四的年龄状态发生变化：

张三（16岁）-0，李四（20岁）-1，王五（17岁）-2

④以key为索引，对比DOM的状态变化：

节点1的状态变化了，只更新节点1的值

⑤以上操作没有问题，效率很高

 

2、使用默认key，列表元素顺序发生变化时：

①有一个元素列表，值为年龄：

张三（16岁），李四（18岁），王五（17岁）

②DOM中默认赋节点key值：

张三（16岁）-0，李四（18岁）-1，王五（17岁）-2

③在列表头位置增加一个元素，列表的key不会跟着元素走，而是就地更新：

赵六（15岁）-0，张三（16岁）-1，李四（18岁）-2，王五（17岁）-3

④以key为索引，对比DOM的状态变化：

节点0、1、2、3都发生变化，全部更新

5）以上操作问题就大了，首先效率大大降低，实质只有一个节点状态变化了，但四个节点都全部更新，其次如果元素里有表单元素，相对应的输入值会发生错位。

 

3、使用指定key，列表元素顺序发生变化时

①有一个元素列表，值为年龄：

张三（16岁），李四（18岁），王五（17岁）

②DOM中为每个节点指定key值：

张三（16岁）-zs，李四（18岁）-ls，王五（17岁）-ww

③在列表头位置增加一个元素，指定的key值，跟着元素走：

赵六（15岁）-zl，张三（16岁）-zs，李四（18岁）-ls，王五（17岁）-ww

④以key为索引，对比DOM的状态变化：

节点zl发生变化，更新节点zl

⑤以上操作没有问题，更新效率很高，因为元素跟着key值移动，表单元素也不会发生错位

 

所以，无论是Vue，还是Blazor，在循环列表中，都尽量赋key值，除非你确定这个列表永远不会出现顺序变更情况，如在列头或列中插入或删除元素。