Vue中的this.$options.data()和this.$data用法说明
问题
项目里遇到一个问题,用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用法说明就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。
推荐阅读
-
详解vue中this.$emit()的返回值是什么
-
vue 中this.$set 动态绑定数据的案例讲解
-
Vue中的this.$options.data()和this.$data用法说明
-
对vue.js中this.$emit的深入理解
-
关于vue3.0中的this.$router.replace({ path: '/'})刷新无效果问题
-
vue中 this.$set的用法详解
-
如何获取Vue中的this.$router.push参数
-
在vue.js中详细解读this.$emit的使用方法
-
vue 中this.$set 动态绑定数据的案例讲解
-
Vue中的this.$options.data()和this.$data用法说明