欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-09-24 14:19:10
问题项目里遇到一个问题,用this.$options.data()重置组件data时,data()里用this获取的props或method都为undefined,代码简化如下:export defa...

问题

项目里遇到一个问题,用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.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,在重置$data时,注意this.$options.data()的this指向,最好使用this.$options.data.call(this)。

以上这篇vue中的this.$options.data()和this.$data用法说明就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。