select_渲染小现象

需求描述

• select下拉框列表中的数据是通过后端接口返回的；
• 由于数据量过大，因此拉去500条数据(非全量)，其余数据通过模糊搜索获取；
• 当下拉框关闭时–清空关键字，重新获取下拉列表；

问题

• 通过模糊搜索获取500条以外的数据—选择；
• 当下拉框关闭时，重新获取列表，列表中不包含该条选中的数据，但是依旧能够显示选择的元素文本而非id；

通过以下案例复现

下拉框默认选中人员1，当点击change按钮时，下拉框列表会改变(选中值不变)；

key值为元素value

• <template>
    <div style="margin-top:20px">
      <el-select v-model="value" placeholder="请选择">
      <el-option
        v-for="item in dataList"
        :key="item.value"
        :label="item.label"
        :value="item.value">
      </el-option>
    </el-select>
    <el-button @click='listChenge' size='mini'>change</el-button>
    </div>
  </template>
  
  <script>
  export default {
        
    data(){
        
      return{
        
        listObj:{
        
          1:[
            {
        label:'人员1', value:111},
            {
        label:'人员2', value:222},
            {
        label:'人员3', value:333}
          ],
          2:[
            {
        label:'人员4', value:444},
            {
        label:'人员5', value:555},
            {
        label:'人员6', value:666}
          ],
          3:[
            {
        label:'人员7', value:777},
            {
        label:'人员8', value:888},
            {
        label:'人员9', value:999}
          ],
        },
        index:1,
        dataList:[],
        value:111
      }
    },
    created(){
        
      this.listChenge()
    },
    methods:{
        
      listChenge(){
        
        this.index = this.index<=3 ? this.index : 1
        this.dataList = this.listObj[this.index]
        this.index++
      }
    }
  }
  </script>
  
  

• 过程

  • [1]默认选择人选1 ，下拉框列表为listObj的第一个元素列表；

    • 

  • [2]点击change按钮，下拉框列表改变，但是选中值依旧能正常回显

    • 

key值为索引

• <template>
    <div style="margin-top:20px">
      <el-select v-model="value" placeholder="请选择">
      <el-option v-for="(item,index) in dataList" :key="index" :label="item.label" :value="item.value">
      </el-option>
    </el-select>
    <el-button @click='listChenge' size='mini'>change</el-button>
    </div>
  </template>
  

• 过程

  • [1]默认选择人选1 ，下拉框列表为listObj的第一个元素列表；

    • 

  • [2]点击change按钮，下拉框列表改变，但是选中值不能正常回显，回显值为value而非label

    • 

原因

• 当dom更新时，key值为value时
  • [1]进行path，通过sameVnode方法进行比较会被判断为同一元素;
  • [2]pathVnode比较 oldVnode==vnode，直接复用；
  • 因此没有重新渲染
• 当dom更新时，key值为index时
  • 进行path，由于key值不相同，sameVnode方法进行比较会被判断为非同一元素，直接替换;
  • 渲染真实dom进行更新