問題

項目里遇到一個問題，用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構造函數(shù)中定義的屬性合并為vm.$options，vm.$options.data()中的this指向vm.$options，而methodA和B并沒有直接掛在vm.$options下，所以this.methodA和this.B為undefined。

// 創(chuàng)建一個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.jsinitMixin (Vue: Class<Component>) { const vm: Component = this // ... vm.$options = mergeOptions( resolveConstructorOptions(vm.constructor), options || {}, vm ) // ...}

2、然后將vm.$options.data映射到vm._data，使得可以通過vm._data訪問數(shù)據(jù)，在映射過程中，通過call將data()的this指向當前的實例vm，并將data()的執(zhí)行結果返回，因為prop和methods的初始化在data之前，所以這時vm上已有_props和_methods，可以拿到this.methodA和this.B。（vm.key如何實現(xiàn)vm._props.key效果見3）。

// src/core/instance/state.jsinitState (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訪問數(shù)據(jù)，Vue再通過一個代理方法使得vm.A可以直接訪問A。

// src/core/instance/state.jsproxy(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用法說明就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持好吧啦網(wǎng)。