Vue中的this.$options.data()和this.$data用法说明
问题
项目里遇到一个问题，用this.$options.data()重置组件data时，data()里用this获取的props或method都为undefined，代码简化如下：
exportdefault{
props:{
P:Object
},
data(){
return{
A:{
a:this.methodA
},
B:this.P
};
},
methods:{
resetData(){//更新时调用
Object.assign(this.$data,this.$options.data());//有问题！！！
},
methodA(){
//dosth.
},
methodB(){//通过用户操作调用
this.A.a&&this.A.a();//this.A.aisundefined,this.Bisundefined！！！
}
}
}
调用resetData()之后，再调用methodB()时，this.A.a和this.B是undefined。
解决
resetData里这样写：
resetData(){//更新时调用
Object.assign(this.$data,this.$options.data.call(this));
}
原因
和Vue实例的初始化相关。(源码version2.6.10)
1、newVue的时候传了一个对象，把该对象记为options，Vue将options中自定义的属性和Vue构造函数中定义的属性合并为vm.$options，vm.$options.data()中的this指向vm.$options，而methodA和B并没有直接挂在vm.$options下，所以this.methodA和this.B为undefined。
//创建一个vue实例
constoptions={
customOption:'foo',
data(){
A:this.methodA
},
methods:{
methodA(){}
},
created:function(){
console.log(this.$options.customOption)//=>'foo'
}
};
newVue(options);
//src/core/instance/init.js
initMixin(Vue:Class){
constvm: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){
//...
constopts=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{
returndata.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=functionproxyGetter(){
returnthis[sourceKey][key]
}
sharedPropertyDefinition.set=functionproxySetter(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用法说明就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持毛票票。