Vue의 this.$options.데이터 () 및this.$데이터 사용법 설명

문제
프로젝트에서 문제가 발생했습니다.this.$로options.데이터 () 구성 요소 데이터를 리셋할 때 데이터 () 에서this로 가져온props나 method는 undefined이고 코드는 다음과 같이 간소화됩니다.

export default {
  props: {
    P: Object
  },
  data () {
    return {
      A: {
        a: this.methodA
      },
      B: this.P
    };
  },
  methods: {
    resetData () { //  
      Object.assign(this.$data, this.$options.data()); //  ！！！
    },
    methodA () {
      // do sth.
    },
    methodB () { //  
      this.A.a && this.A.a(); // this.A.a is undefined, this.B is undefined！！！
    }
  }
}

resetData () 를 호출한 다음 methodB () 를 호출할 때this.A.a와 this.B는 undefined입니다.
해결하다
resetData에 다음과 같이 쓰여 있습니다.

resetData () { //  
  Object.assign(this.$data, this.$options.data.call(this));
}

원인
Vue 인스턴스의 초기화와 연관됩니다.(원본 버전 2.6.10)
1. new Vue에서 하나의 대상을 전송했습니다. 이 대상을options로 기록합니다. Vue는options에서 사용자 정의 속성과 Vue 구조 함수에 정의된 속성을 vm.$로 통합합니다.options,vm.$options.데이터 () 의this는 vm.$를 가리킵니다.옵션, methodA와 B는 vm.$에 직접 연결되어 있지 않습니다.options 아래, 그래서this.methodA 및this.B는 undefined입니다.

//  vue 
const options = {
  customOption: 'foo',
  data () {
    A: this.methodA
  },
  methods: {
    methodA () {}
  },
  created: function () {
    console.log(this.$options.customOption) // => 'foo'
  }
};
new Vue(options);
 
// src/core/instance/init.js
initMixin (Vue: Class<Component>) {
  const vm: Component = this
  // ...
  vm.$options = mergeOptions(
    resolveConstructorOptions(vm.constructor),
    options || {},
    vm
  )
  // ...
}

2, 그리고 vm.$를options.데이터가 vm._ 에 매핑됩니다.데이터, vm._데이터가 데이터에 접근하여 비추는 과정에서call을 통해 데이터 ()의this를 현재의 실례 vm로 가리키고 데이터 ()의 실행 결과를 되돌려줍니다. 프로프와 methods의 초기화는 데이터 이전에 있기 때문에 이 때 vm에 _props 및_methods,this를 받을 수 있습니다.methodA 및this.B.(vm.key가 vm._props.key 효과를 어떻게 실현하는지는 3 참조).

// src/core/instance/state.js
initState (vm: Component) {
  // ...
  const opts = vm.$options
  if (opts.props) initProps(vm, opts.props)
  if (opts.methods) initMethods(vm, opts.methods)
  if (opts.data) {
    initData(vm) //  getData(data, vm) this
  }
  // ...
}
 
getData (data: Function, vm: Component): any {
  // ...
  try {
    return data.call(vm, vm) // this vm
  }
  // ...
}

3. 위에 속성을 vm._데이터에서 vm._data.A가 데이터에 접근하면 Vue는 프록시 방법을 통해 vm를 실행합니다.A는 A에 직접 액세스할 수 있습니다.

// src/core/instance/state.js
proxy(vm, `_data`, key);
 
proxy (target: Object, sourceKey: string, key: string) {
  sharedPropertyDefinition.proxyget = function proxyGetter () {
    return this[sourceKey][key]
  }
  sharedPropertyDefinition.set = function proxySetter (val) {
    this[sourceKey][key] = val
  }
  Object.defineProperty(target, key, sharedPropertyDefinition)
}

총결산
데이터 () 에서this를 사용하여props나methods에 접근하면 $data를 초기화할 때this.$를 주의하십시오.options.데이터 ()의this 지향,this.$를 사용하는 것이 좋습니다.options.data.call(this).
위의 Vue 의 this.$options.데이터 () 및this.$데이터 용법 설명은 바로 편집자가 여러분께 공유한 모든 내용입니다. 여러분께 참고가 되고 저희를 많이 사랑해 주시기 바랍니다.