在Vue中,要在data里使用this有以下几种方法:1、使用箭头函数,2、在created生命周期钩子中设置data,3、使用Vue 3的Composition API。下面将详细介绍其中一种方法——使用箭头函数。 1、使用箭头函数:因为箭头函数不会绑定自己的this,而是继承自上下文的this,所以可以在箭头函数中访问组件实例的属性。我们可以在data函数...
在Dep.target存在时去执行这些滥用this去读取data中数据的代码会产生性能问题,故还要搞清楚这些代码是写在哪里才会被执行到,换句话来说,要搞清楚在哪里滥用this去读取data中数据会产生性能问题。 在第二小节中介绍了Dep.target被赋值后会执行value =this.getter.call(vm, vm),其中this.getter是一个函数,那么若在...
在Vue中,data选项是个好东西,把数据往里一丢,在一个Vue组件中任何一个地方都可以通过this来读取data中数据。 前言 在Vue中,data选项是个好东西,把数据往里一丢,在一个Vue组件中任何一个地方都可以通过this来读取data中数据。但是要避免滥用this去读取data中数据,至于在哪里要避免滥用,如果滥用会导致什么后果,本...
通过this直接访问到methods里面的函数的原因是:因为methods里的方法通过 bind 指定了this为 new Vue的实例(vm)。通过 this 直接访问到 data 里面的数据的原因是:data里的属性最终会存储到new Vue的实例(vm)上的 _data对象中,访问 this.xxx,是访问Object.defineProperty代理后的 this._data.xxx。 在平时使用vue来...
首先,我们知道,vue中 this.$options.data() 可以获取原始的data值(只读),this.$data 获取当前状态下的data,在重置data数据时,拷贝重新赋值一下就行了。 如下: 1 Object.assign(this.$data,this.$options.data()); 这是,如果,你的data数据中有采用this的写法,在调用this.$options.data() 就会报错,因为data...
在Vue中,data选项是个好东西,把数据往里一丢,在一个Vue组件中任何一个地方都可以通过this来读取data中数据。但是要避免滥用this去读取data中数据,至于在哪里要避免滥用,如果滥用会导致什么后果,本专栏将会一一揭晓。 一、用this读取data中数据的过程 在Vue源码中会把data中数据添加getter函数和setter函数,将其转成...
vue2源码中data初始化时候this指向问题以及引发的思考 new 的时候调用了一个this._init方法,这个方法在执行的时候调用了原型上面的方法 this._init()这就表示了在_init()函数中的this其实就是this._init()这个字段前面的this,然而这个this就是new字段创建实例对象中的第三步将空对象作为构造函数的上下文.也就是...
data() { return { message: 'Hello Vue!' }; }, methods: { showMessage() { console.log(this.message); // 输出: Hello Vue! } } }; 在这个例子中,this.message访问的是data函数返回的对象中的message属性。 二、调用组件的方法 除了访问数据属性,this还可以用来调用定义在methods中的方法。
在Vue中,data选项是个好东西,把数据往里一丢,在一个Vue组件中任何一个地方都可以通过this来读取data中数据。但是要避免滥用this去读取data中数据,至于在哪里要避免滥用,如果滥用会导致什么后果,本文章将会一一揭晓。 一、用this读取data中数据的过程 在Vue源码中会把data中数据添加getter函数和setter函数,将其转成...
data(){return{ message:"你好!"} }, created:function() { console.log(this)//在Vue所有的生命周期钩子方法里使用this,this指向使用它的Vue实例this.showMessage1();this.showMessage2();this.showMessage3();//vue实例(构造函数)调用了showMessage3方法(new绑定)}, ...