问题问题项目里遇到一个问题，用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！！！

}

}
}
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));
}
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) {

const vm: Component = this

// ...

vm.$options = mergeOptions(

resolveConstructorOptions(vm.constructor),

options || {},

vm

)

// ...
}
// 创建一个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) {

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

}

// ...
}
// 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)
}
// 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用法说明就是小编分享给大家的全部内容了，希望能给大家一个参考。