key值的应用场景

我们知道我们在v-for中会绑定对应的key值，这个key作为虚拟dom的身份标识，当响应式更新时，diff算法会将key值进行比对，根据新旧虚拟dom的key决定是否重新渲染。

除了在v-for身上他也可以巧妙的利用在组件上

1、各类组件，比如el-tree，el-table比较实用

1.1、el-tree

如下图我们的树上有个刷新按钮。很多人可能会用v-if将此dom重新刷新，但是还有种方式就是可以给tree绑定一个key，当点击刷新按钮更新tree的key值即可完成刷新操作

代码如下：

//1.在el-tree上绑定key值为时间戳
            ref="tree"
            :key="treeKey"
            :loading="tloading"
            :props="props"
            :data="treeData"
            :highlight-current="true"
            node-key="id"
            :check-strictly="true"
            show-checkbox
            :default-expanded-keys="showList"
            :render-content="drawingTreeNode"
            @check-change="treeCheckChange"
            @node-click="clickTree"
 />
 
//2.在data中定义key值为时间戳
data(){
    return{
        treeKey: new Date().getTime(),
 
    }
}
//3.在methods中定义刷新方法刷新key值即可
methods:{
    refreshTree(){
        this.treeKey=+new Date()
    }
}
 
 

 1.2、el-table

点击修改按钮可将某一行部分字段设置为可编辑单元格。比较常见的方式就是使用一个变量动态决定是否可编辑。由于是树形表格的缘故，此时使用$set也会造成非响应式的问题

因为树形表格的缘故，我们此时使用给表格行绑定key属性来解决

如下图

 

 代码如下：

// 1.给需要响应式的el-table-cloumn绑定key值
   "rowKey" prop="useSeries" :label="'适用车型'" min-width="120">
         <template slot-scope="scope">
                  <span v-if="scope.row.flag">
                    <el-select v-model="scope.row.useSeries " clearable placeholder="'">
                      <el-option
                        v-for="item in modelList"
                        :key="item.ID_"
                        :label="item.NUMBER_"
                        :value="item.NUMBER_"
                      />
                    el-select>
                  span>
                  <span v-else>
                    {{ scope.row.useSeries }}
                  span>
          template>
    
 
// 2.data中定义rowKey
   data() {
       rowKey: +new Date(),
       
    }
 
// 3.修改方法刷新即可，因为我这里调用了接口查询对应可修改下拉数据所以写在接口返回之后
    methods:{
         queryRowPoint(id, row) {
          this.tableLoading = true
          getPoint({ stationId: id }).then(res => {
            this.pointObj[id] = res.resultlist || []
            this.rowKey = +new Date()
          }).finally(() => {
            this.tableLoading = false
          })
    },
 
    }

 还有一下应用场景使用方法差不多。当然可能不用刷新key也会很轻松解决问题，但是这可以是种思路进行拓展。因为代码都是在csdn的编辑器手写的所以版式可能不太正