問題

專案裡遇到一個問題，用this.$options.data()重置元件data時，data()裡用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例項的初始化相關。(原始碼version2.6.10)

1、new Vue的時候傳了一個物件，把該物件記為options，Vue將options中自定義的屬性和Vue建構函式中定義的屬性合併為vm.$options，vm.$options.data()中的this指向vm.$options，而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.data對映到vm._data，使得可以通過vm._data訪問資料，在對映過程中，通過call將data()的this指向當前的例項vm，並將data()的執行結果返回，因為prop和methods的初始化在data之前，所以這時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._data裡，可以通過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)
}

總結

data()中若使用了this來訪問props或methods，在重置$data時，注意this.$options.data()的this指向，最好使用this.$options.data.call(this)。

以上這篇Vue中的this.$options.data()和this.$data用法說明就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援我們。