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用法说明就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持毛票票。