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 相关文章推荐
得到文本框选中的文字,动态插入文字的js代码
Mar 07 Javascript
javascript 自定义事件初探
Aug 21 Javascript
js螺旋动画效果的具体实例
Nov 15 Javascript
在浏览器中打开或关闭JavaScript的方法
Jun 03 Javascript
Bootstrap中CSS的使用方法
Feb 17 Javascript
javascript学习笔记_浅谈基础语法,类型,变量
Sep 19 Javascript
JavaScript 函数的定义-调用、注意事项
Apr 16 Javascript
深究AngularJS——ng-checked(回写:带真实案例代码)
Jun 13 Javascript
es7学习教程之fetch解决异步嵌套问题的方法示例
Jul 21 Javascript
JavaScript中toLocaleString()和toString()的区别实例分析
Aug 14 Javascript
taro小程序添加骨架屏的实现代码
Nov 15 Javascript
vue基于better-scroll仿京东分类列表
Jun 30 Javascript
解决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编写daemon process 实例详解
2016/11/13 PHP
php中上传文件的的解决方案
2018/09/25 PHP
使一个函数作为另外一个函数的参数来运行的javascript代码
2007/08/13 Javascript
JavaScript DOM 添加事件
2009/02/14 Javascript
解决jquery .ajax 在IE下卡死问题的解决方法
2009/10/26 Javascript
jQuery bind事件使用详解
2011/05/05 Javascript
使用jQuery解决IE与FireFox下createElement方法的差异
2013/11/14 Javascript
实例讲解JQuery中this和$(this)区别
2014/12/08 Javascript
原生js和jquery实现图片轮播特效
2015/04/23 Javascript
JavaScript基于ajax编辑信息用法实例
2015/07/15 Javascript
JavaScript学习笔记--常用的互动方法
2016/12/07 Javascript
Vue2.0权限树组件实现代码
2017/08/29 Javascript
vue watch关于对象内的属性监听
2019/04/22 Javascript
js中火星坐标、百度坐标、WGS84坐标转换实现方法示例
2020/03/02 Javascript
VSCode launch.json配置详细教程
2020/06/18 Javascript
[43:03]完美世界DOTA2联赛PWL S2 PXG vs Magma 第二场 11.21
2020/11/24 DOTA
pip matplotlib报错equired packages can not be built解决
2018/01/06 Python
python编写暴力破解zip文档程序的实例讲解
2018/04/24 Python
Python使用pandas处理CSV文件的实例讲解
2018/06/22 Python
详谈Python 窗体(tkinter)表格数据(Treeview)
2018/10/11 Python
Python爬取数据保存为Json格式的代码示例
2019/04/09 Python
Python超越函数积分运算以及绘图实现代码
2019/11/20 Python
Python3.7黑帽编程之病毒篇(基础篇)
2020/02/04 Python
Eclipse配置python默认头过程图解
2020/04/26 Python
pytorch快速搭建神经网络_Sequential操作
2020/06/17 Python
Python数据可视化实现漏斗图过程图解
2020/07/20 Python
浅谈python锁与死锁问题
2020/08/14 Python
如何从csv文件构建Tensorflow的数据集
2020/09/21 Python
使用 CSS3 中@media 实现网页自适应的示例代码
2020/03/24 HTML / CSS
会计专业推荐信
2013/10/29 职场文书
干部现实表现材料
2014/02/13 职场文书
金融学专科生自我鉴定
2014/02/21 职场文书
学校运动会广播稿
2014/10/11 职场文书
2016感恩母亲节校园广播稿
2015/12/17 职场文书
Python中使用subprocess库创建附加进程
2021/05/11 Python
win10忘记pin密码登录不了怎么办?win10忘记pin密码登不进去的解决方法
2022/07/07 数码科技