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


Posted in Javascript onJuly 26, 2020

问题

项目里遇到一个问题,用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用法说明就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
显示、隐藏密码
Jul 01 Javascript
JavaScript的Function详细
Nov 14 Javascript
图片在浏览器中底部对齐 解决方法之一
Nov 30 Javascript
JavaScript实现弹出模态窗体并接受传值的方法
Feb 12 Javascript
fullCalendar中文API官方文档
Feb 07 Javascript
ES6新特性六:promise对象实例详解
Apr 21 Javascript
浅谈 vue 中的 watcher
Dec 04 Javascript
JavaScript实现轮播图特效
Apr 10 Javascript
es6数组includes()用法实例分析
Apr 18 Javascript
浅谈vue项目,访问路径#号的问题
Aug 14 Javascript
JS如何调用WebAssembly编译出来的.wasm文件
Nov 05 Javascript
html中两种获取标签内的值的方法
Jun 16 jQuery
解决vue的router组件component在import时不能使用变量问题
Jul 26 #Javascript
Element Steps步骤条的使用方法
Jul 26 #Javascript
解决vue动态路由异步加载import组件,加载不到module的问题
Jul 26 #Javascript
vue 动态设置img的src地址无效,npm run build 后找不到文件的解决
Jul 26 #Javascript
VUE动态生成word的实现
Jul 26 #Javascript
Element Dialog对话框的使用示例
Jul 26 #Javascript
在vue中使用防抖函数组件操作
Jul 26 #Javascript
You might like
如何从一个php文件向另一个地址post数据,不用表单和隐藏的变量的
2007/03/06 PHP
php 全文搜索和替换的实现代码
2008/07/29 PHP
jquery获取多个checkbox的值异步提交给php的方法
2015/06/24 PHP
php微信公众号开发之秒杀
2018/10/20 PHP
javascript 读取xml,写入xml 实现代码
2009/07/10 Javascript
jQuery 相关控件的事件操作分解
2009/08/03 Javascript
各种页面定时跳转(倒计时跳转)代码总结
2013/10/24 Javascript
javascript 终止函数执行操作
2014/02/14 Javascript
基于socket.io和node.js搭建即时通信系统
2014/07/30 Javascript
JavaScript DOM事件(笔记)
2015/04/08 Javascript
Javascript中判断对象是否为空
2015/06/10 Javascript
JQuery+Ajax实现数据查询、排序和分页功能
2015/09/27 Javascript
js获取鼠标点击的对象,点击另一个按钮删除该对象的实现代码
2016/05/13 Javascript
JS组件系列之MVVM组件构建自己的Vue组件
2017/04/28 Javascript
使用vue打包进行云服务器上传的问题
2020/03/02 Javascript
toString.call()通用的判断数据类型方法示例
2020/08/28 Javascript
javascript贪吃蛇游戏设计与实现
2020/09/17 Javascript
JS+CSS实现动态时钟
2021/02/19 Javascript
在Django中管理Users和Permissions以及Groups的方法
2015/07/23 Python
详解Python之unittest单元测试代码
2018/01/24 Python
Python实现获取前100组勾股数的方法示例
2018/05/04 Python
python 实现对文件夹中的图像连续重命名方法
2018/10/25 Python
基于python连接oracle导并出数据文件
2020/04/28 Python
Python文件操作及内置函数flush原理解析
2020/10/13 Python
HTML5实现视频弹幕功能
2019/08/09 HTML / CSS
俄罗斯电子产品在线商店:UltraTrade
2020/01/30 全球购物
仓库主管岗位职责
2014/03/02 职场文书
餐厅总厨求职信
2014/03/04 职场文书
学雷锋志愿服务月活动总结
2014/03/09 职场文书
感恩寄语大全
2014/04/11 职场文书
民主生活会对照检查材料思想汇报
2014/09/27 职场文书
病危通知书样本
2015/04/17 职场文书
2015年社区综治工作总结
2015/04/21 职场文书
公司周年庆典致辞
2015/07/30 职场文书
毕业季聚会祝酒词!
2019/07/04 职场文书
使用PostGIS完成两点间的河流轨迹及流经长度的计算(推荐)
2022/01/18 PostgreSQL