您的位置:首页技术文章
文章详情页

Vue中的this.$options.data()和this.$data用法说明

【字号: 日期:2022-12-27 16:50:30浏览:6作者:猪猪

问题

项目里遇到一个问题,用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,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.jsinitMixin (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.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访问数据,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用法说明就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持好吧啦网。

标签: Vue
相关文章: