快捷導(dǎo)航

Vue中的this.$options.data()和this.$data用法說(shuō)明

更新時(shí)間：2020年07月26日 16:07:17 作者：mocoe

這篇文章主要介紹了Vue中的this.$options.data()和this.$data用法說(shuō)明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧

問(wèn)題

項(xiàng)目里遇到一個(gè)問(wèn)題，用this.$options.data()重置組件data時(shí)，data()里用this獲取的props或method都為undefined，代碼簡(jiǎn)化如下：

export default {
  props: {
    P: Object
  },
  data () {
    return {
      A: {
        a: this.methodA
      },
      B: this.P
    };
  },
  methods: {
    resetData () { // 更新時(shí)調(diào)用
      Object.assign(this.$data, this.$options.data()); // 有問(wèn)題?。。?
    },
    methodA () {
      // do sth.
    },
    methodB () { // 通過(guò)用戶操作調(diào)用
      this.A.a && this.A.a(); // this.A.a is undefined, this.B is undefined?。?！
    }
  }
}

調(diào)用resetData()之后，再調(diào)用methodB()時(shí)，this.A.a和this.B是undefined。

解決

resetData里這樣寫(xiě)：

resetData () { // 更新時(shí)調(diào)用
  Object.assign(this.$data, this.$options.data.call(this));
}

原因

和Vue實(shí)例的初始化相關(guān)。(源碼version2.6.10)

1、new Vue的時(shí)候傳了一個(gè)對(duì)象，把該對(duì)象記為options，Vue將options中自定義的屬性和Vue構(gòu)造函數(shù)中定義的屬性合并為vm.$options，vm.$options.data()中的this指向vm.$options，而methodA和B并沒(méi)有直接掛在vm.$options下，所以this.methodA和this.B為undefined。

// 創(chuàng)建一個(gè)vue實(shí)例
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，使得可以通過(guò)vm._data訪問(wèn)數(shù)據(jù)，在映射過(guò)程中，通過(guò)call將data()的this指向當(dāng)前的實(shí)例vm，并將data()的執(zhí)行結(jié)果返回，因?yàn)閜rop和methods的初始化在data之前，所以這時(shí)vm上已有_props和_methods，可以拿到this.methodA和this.B。（vm.key如何實(shí)現(xiàn)vm._props.key效果見(jiàn)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) // 里面通過(guò)getData(data, vm)改變this
  }
  // ...
}
 
getData (data: Function, vm: Component): any {
  // ...
  try {
    return data.call(vm, vm) // this替換為vm
  }
  // ...
}

3、上面把屬性映射到了vm._data里，可以通過(guò)vm._data.A訪問(wèn)數(shù)據(jù)，Vue再通過(guò)一個(gè)代理方法使得vm.A可以直接訪問(wèn)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)
}

總結(jié)

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

以上這篇Vue中的this.$options.data()和this.$data用法說(shuō)明就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: