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

2024-07-28 14:48:38

问题

项目里遇到一个问题，用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中methods互相调用的方法详解

如下所示: 最近在学习vue,并用vue+vue-router+axios+elementUI做了一个pos收银系统的前端页面,但是中间遇到methods里的方法调用问题.本身源码是没有调用的,但是我想直接调用多方便,结果出错了--然后百度了一波,终于解决了~ 分享并做个笔记. delAllOrderList:function(goods) { this.tableData = []; this.totalCount = 0; this.money = 0; }, checkout:functi
vue如何获取自定义元素属性参数值的方法

偶尔还是会陷入到DOM操作上面去,其实你应该关心的是数据传递,而不是操作DOM.如果你是想获取data-num的数据,可以这样写: <span @click="getData($event,'21')">55</span> getData:function (e,num) { console.log(num) } 这样就可以取到这个值了,如果你是确实想操作DOM,那你可以这样写: <span data-num="21" ref=&quo
Vue使用axios出现options请求方法

以下代码如果需要在你本地跑起来: Ⅰ.需要apache服务,并把php代码丢进去指定位置 Ⅱ.将下面http://www.test.com/day05/jiekou.php地址,改成自己指定位置的域名或ip 1.从一段简易代码说起前端代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewpor
Vue.js获取被选择的option的value和text值方法

如下所示: 1.获取option的value的值,watch option 控件时,或自动获取option的value的值. 2.获取被选中的option的text的值时,使用:$("#optionID option:selected").text 拓展知识:select标签如何传递选中option的value值与text值方法如下所示: <select name="type" onchange="show_sub(this.options[thi
Vue实例的对象参数options的几个常用选项详解

一. 新建一个Vue实例可以有下列两种方式: 1.new一个实例 var app= new Vue({ el:'#todo-app', // 挂载元素 data:{ // 在.vue组件中data是一个函数,要写成data () {}这种方式 items:['item 1','item 2','item 3'], todo:'' }, methods:{ // 方法成员 rm:function(i){ this.items.splice(i,1) } } }) // 之后再 export def
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,
在vue中使用echarts(折线图的demo,markline用法)

公司最近在用vue开发项目,项目接近尾声了,趁休息时间写点demo-- vue引入echarts(折线图的demo) 主要是解决引入echarts,markline的使用(基准线) 这是demo的效果图: vue脚手架不多赘述 1.安装依赖 cnpm install echarts -S 2.在main.js中引入echarts import echarts from 'echarts' 3.在main.js中安装 Vue.prototype.echarts = echarts; 一般来说能正常
vue中的循环对象属性和属性值用法

v-for除了可以循环数组,还可以循环对象. 例子: <template> <div> <div v-for="(item,i) in obj">{{i}}--{{item}}</div> </div> </template> <script> export default { name: "HelloWorld", data () { return { obj:{ age:1, n
vue中v-show和v-if的异同及v-show用法

一.官方解释: 1.v-if 是"真正"的条件渲染,因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建. 2.v-if 也是惰性的:如果在初始渲染时条件为假,则什么也不做--直到条件第一次变为真时,才会开始渲染条件块. 3.相比之下,v-show 就简单得多--不管初始条件是什么,元素总是会被渲染,并且只是简单地基于 CSS 进行切换. 4.一般来说,v-if 有更高的切换开销,而 v-show 有更高的初始渲染开销.因此,如果需要非常频繁地切换,则使用 v- sh
详解vue中v-on事件监听指令的基本用法

一.本节说明我们在开发过程中经常需要监听用户的输入,比如:用户的点击事件.拖拽事件.键盘事件等等.这就需要用到我们下面要学习的内容v-on指令. 我们通过一个简单的计数器的例子,来讲解v-on指令的使用. 二. 怎么做定义数据counter,用于表示计数器数字,初始值设置为0 v-on:click 表示当发生点击事件的时候,触发等号里面的表达式或者函数表达式counter++和counter--分别实现计数器数值的加1和减1操作语法糖:我们可以将v-on:click简写为@click 三
vue中4个自定义指令讲解及实例用法

四个实用的vue自定义指令 1.v-drag 需求:鼠标拖动元素思路: 元素偏移量 = 鼠标滑动后的坐标 - 鼠标初始点击元素时的坐标 + 初始点击时元素距离可视区域的top.left. 将可视区域作为边界,限制在可视区域里面拖拽.[相关推荐:<vue.js教程>] 代码: Vue.directive('drag', { inserted(el) { let header = el.querySelector('.dialog_header') header.style.cssText +=
vue中v-cloak解决刷新或者加载出现闪烁问题（显示变量）

在使用vue绑定数据的时候,渲染页面时会出现变量闪烁,例如 <div class="#app"> <p>{{value.name}}</p> </div> 在加载的时候会看到 {{value.name}} 在页面出现,过了几秒之后才会渲染数据,在vue中有个指令可以解决这个问题,v-cloak 那么,v-cloak要放在什么位置呢,是不是每个需要渲染数据的标签都要添加这个指令,经过试验发现,v-cloak并不需要添加到每个标签,只要在el
基于Vue中this.$options.data()的this指向问题

目录 this.$options.data()的this指向问题 vue文档中有关于data的指向问题的解释 vue骚操作之this.$options.data() 重置vue组件的data数据小结一下 this.$options.data()的this指向问题项目里遇到一个问题,用this.$options.data()重置组件data时报错,原因是因为form里的rule规则采用了this写法. 如下: rules: { code: [this.$rules.requir
解决在Vue中使用axios POST请求变成OPTIONS的问题

POST请求变成OPTIONS 及报错信息(跨域) 主要解决方案:使用qs.stringify 1.安装qs npm install qs --save 2.axios配置和使用在接口请求页面引入安装好的qs,如下图: 引入完成之后使用qs改变传递的参数data,如下: 这样就可以了,post请求的时候就不会再出现OPTIONS了补充知识:axios发起请求,为什么先发送options请求,再发送get/post请求引起原因 1,跨域: 2,请求头非默认情况. 默认请求头如下 Accept
vue中data改变后让视图同步更新的方法

前言不久前天看到一个比较有趣的问题,vue中data改变后,如何让视图同步更新,搜索了一下,并没有发现解决问题的方法,只能从源码去找解决方法了. 原因我们都知道,在vue中改变数据后,视图并不是同步更新的. 在vue实例初始化后,会将data设置为响应式对象,当我们执行this.xxx = 1时,会触发这个响应式对象的setter.在setter中,会触发更新,通知所有订阅了xxx的订阅者.但是这个触发更新并不是同步的,它会将所有的watcher都添加到一个队列,并在nextTick之后去更

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

相关推荐

随机推荐