Vue.$set 실효 구덩이 문제 발견 및 해결 방안

우연히 프로젝트 에서 Vue.$set 가 실 효 된 것 을 발 견 했 습 니 다.

데이터 필터 추가 가 필요 합 니 다.왼쪽 은 컨트롤 입 니 다.중간 은 조건 이 고 오른쪽 은 값 입 니 다.
컨트롤 에 따라 값 옵션 컨트롤 을 렌 더 링 하기 때 문 입 니 다.

    <el-form inline >
      <el-form-item style="margin-bottom: 20px;">
        <el-select v-model="data[props.prop]" @change="data[props.value] = ''">
          <el-option
            v-for="item in controls"
            :key="item.id"
            :value="item.id"
            :label="item.label">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item style="margin-bottom: 20px;">
        <el-select v-model="data[props.type]">
          <el-option
            v-for="item in condition"
            :key="item.code"
            :value="item.code"
            :label="item.name"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item style="margin-bottom: 20px;">
        <FormControl v-if="control" :control="control" :value="data[props.value]" @input="onValueChange" ></FormControl>
        <el-input v-else :value="data[props.value]" @input="onValueChange"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-plus" @click="add"></el-button>
      </el-form-item>
    </el-form>

{
  props:{
    props: {
      type: Object,
      default: () => ({
        prop: 'prop',
        value: 'value',
        type: 'type'
      })
    }
  },
  data(){
    return {
      data:{
        
      }
    }
  },
  methods:{
    onValueChange(val){
      this.$set(this.data, this.props.value, val)
    }
  }
  //...
}

코드 세 션
컨트롤 ID 의 불확실 성 으로 인해 모든 data 가 key 를 미리 설정 하지 못 해 자 연 스 럽 게 응답 할 수 없 기 때문에 onValue Change 에서 this.$set 동적 으로 데 이 터 를 추가 하여 응답 을 실현 합 니 다.

재현 하면 값 입력 상자 안의 데이터 가 실시 간 으로 응답 하지 않 는 것 을 발견 할 수 있 습 니 다.
$set 를 사 용 했 는데 테스트 에 응답 하지 못 했 는데 컨트롤 을 바 꾸 면 value 값 이 응답 하지 않 는 다 는 것 을 알 게 되 었 습 니 다.하지만 전환 하기 전에 아무 것 이나 입력 하고 전환 하면 괜 찮 습 니 다.
또 한 차례 조사 한 후에 발견 되 었 다.

<el-select v-model="data[props.prop]" @change="data[props.value] = ''">

@change 이벤트 삭제 후 고장 해결
문 제 는 data[props.value]='
Vue 소스 코드 보기

//vue/src/core/observer/index.js      
 
/**
 * Set a property on an object. Adds the new property and
 * triggers change notification if the property doesn't
 * already exist.
 */
export function set (target: Array<any> | Object, key: any, val: any): any {
  if (process.env.NODE_ENV !== 'production' &&
    (isUndef(target) || isPrimitive(target))
  ) {
    warn(`Cannot set reactive property on undefined, null, or primitive value: ${(target: any)}`)
  }
  if (Array.isArray(target) && isValidArrayIndex(key)) {
    target.length = Math.max(target.length, key)
    target.splice(key, 1, val)
    return val
  }
  if (key in target && !(key in Object.prototype)) {
    target[key] = val
    return val
  }
  const ob = (target: any).__ob__
  if (target._isVue || (ob && ob.vmCount)) {
    process.env.NODE_ENV !== 'production' && warn(
      'Avoid adding reactive properties to a Vue instance or its root $data ' +
      'at runtime - declare it upfront in the data option.'
    )
    return val
  }
  if (!ob) {
    target[key] = val
    return val
  }
  defineReactive(ob.value, key, val)
  ob.dep.notify()
  return val
}

define Reactive 전에 key 가 대상 안에 존재 하 는 지 여 부 를 판단 하고 존재 하면 건 너 뛰 었 음 을 알 수 있 습 니 다.
구 덩이 는 Vue.$set 문 서 를 여러 번 뒤 져 보 았 지만$set 가 존재 하 는 key 에 모니터링 대상 을 추가 할 수 없습니다.
data[props.value]=','onValueChange(')로 변경 하여 문 제 를 완벽 하 게 해결 합 니 다.

총결산
Vue.$set 이전에 반드시 대상 내 key 가 존재 하지 않 아야 합 니 다.그렇지 않 으 면 값 만 업데이트 되 고 이 Key 에 응답 모니터링 을 추가 하지 않 습 니 다.
이상 은 개인 적 인 경험 이 므 로 여러분 에 게 참고 가 되 기 를 바 랍 니 다.여러분 들 도 저 희 를 많이 응원 해 주시 기 바 랍 니 다.