Vue.set()와 this.$set()의 사용 과 차이

vue 를 사용 하여 개발 하 는 과정 에서 vue 인 스 턴 스 를 생 성 한 후에 데이터 에 값 을 부여 할 때 자동 으로 보기 로 업데이트 되 지 않 을 수도 있 습 니 다.vue 문 서 를 보 러 갈 때 다음 과 같은 말 이 있 습 니 다.인 스 턴 스 를 만 든 후에 새로운 속성 을 인 스 턴 스 에 추가 하면 보기 업 데 이 트 를 실행 하지 않 습 니 다.다음 코드 는 student 대상 에 게 age 속성 을 추가 합 니 다.

data () {
  return {
    student: {
      name: '',
      sex: ''
    }
  }
}
mounted () { // ――    ，      
  this.student.age = 24
}

ES5 의 제한 으로 Vue.js 는 대상 속성의 추가 또는 삭 제 를 감지 할 수 없습니다.Vue.js 는 인 스 턴 스 를 초기 화 할 때 속성 을 getter/setter 로 바 꾸 기 때문에 속성 은 data 대상 에서 만 Vue.js 를 변환 시 켜 야 응답 할 수 있 습 니 다.
올 바른 쓰기:this.$set(this.data,"key",value')

mounted () {
  this.$set(this.student,"age", 24)
}

::Vue 에서 루트 응답 속성 을 동적 으로 추가 할 수 없습니다.
예 를 들 면:

const app = new Vue({
  data: {
    a: 1
  }
  // render: h => h(Suduko)
}).$mount('#app1')

Vue.set(app.data, 'b', 2)

Vue.set(object,propertyName,value)방법 으로 포 함 된 대상 에 응답 식 속성 을 추가 할 수 있 습 니 다.예 를 들 어

var vm=new Vue({
    el:'#test',
    data:{
        //data     info   
        info:{
            name:'  ';
        }
    }
});
// info        
Vue.set(vm.info,'sex',' ');

Vue.set()와 this.$set()의 실현 원리
먼저 Vue.set()의 소스 코드 를 살 펴 보 겠 습 니 다.

import { set } from '../observer/index'

...
Vue.set = set
...

this.$set()의 원본 코드 를 다시 보 겠 습 니 다:

import { set } from '../observer/index'

...
Vue.prototype.$set = set
...

결과적으로 우 리 는 Vue.set()와 this.$set()두 api 의 실현 원리 가 기본적으로 똑 같 고 모두 set 함 수 를 사용 한 것 을 발견 했다.set 함 수 는.../observer/index 파일 에서 내 보 냅 니 다.차이 점 은 Vue.set()는 set 함 수 를 Vue 구조 함수 에 연결 하 는 것 입 니 다.this.$set()는 set 함 수 를 Vue 원형 에 연결 하 는 것 입 니 다.

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
}

set 함수 가 target,key,val 로 세 개의 인 자 를 받 는 것 을 발 견 했 습 니 다.그 중에서 target 의 값 은 배열 이나 대상 입 니 다.이것 은 홈 페이지 에서 제시 한 Vue.set()방법 을 호출 할 때 들 어 오 는 매개 변수 와 대응 합 니 다.

참고:
vue 에서 만난 구덩이-변화 검출 문제(배열 관련)
Vue.set()와 this.$set()의 사용 과 차이 점 에 관 한 이 글 은 여기까지 소개 되 었 습 니 다.Vue.set()와 this.$set()에 관 한 더 많은 내용 은 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 찾 아 보 세 요.앞으로 도 많은 응원 부 탁 드 리 겠 습 니 다!