Object.assign(this.$data, this.$options.data())

問題：
項目里遇到一個問題，用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.data()中的this指向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，在重置options.data()的this指向，最好使用this.$options.data.call(this)。

參考
https://www.cnblogs.com/denon/p/10420029.html

http://www.lxweimin.com/p/983680723ec1