在Vue组件中直接在data函数中使用this是行不通的,因为this在data函数执行时还未绑定到Vue实例上。要在data中使用this,可以借助箭头函数来解决。箭头函数不会绑定自己的this,而是继承自上下文的this,这样我们就可以在箭头函数中访问Vue实例的属性。 示例代码: new Vue({ el: '#app', data: () => ({ message:...
总结 无论是setup返回的数据还是data数据，还有$data，$el...都是通过Proxy代理，在组件初始化阶段执行。代理数据的实现是将setup执行结果setupState中数据返回，再在渲染render时绑定this指向；像$el这类便于用户开发使用的，同样是在Proxy中处理，根据不同的key处理不同的逻辑。
三、在何处滥用this去读取data中数据 在Dep.target存在时去执行这些滥用this去读取data中数据的代码会产生性能问题,故还要搞清楚这些代码是写在哪里才会被执行到,换句话来说,要搞清楚在哪里滥用this去读取data中数据会产生性能问题。 在第二小节中介绍了Dep.target被赋值后会执行value =this.getter.call(vm, vm),...
在Dep.target存在时去执行这些滥用this去读取data中数据的代码会产生性能问题,故还要搞清楚这些代码是写在哪里才会被执行到,换句话来说,要搞清楚在哪里滥用this去读取data中数据会产生性能问题。 在第二小节中介绍了Dep.target被赋值后会执行value = this.getter.call(vm, vm),其中this.getter是一个函数,那么若在...
一、用this读取data中数据的过程 在Vue源码中会把data中数据添加getter函数和setter函数,将其转成响应式的。getter函数代码如下所示: functionreactiveGetter{ var value = getter ? getter.call(obj) : val; if(Dep.target) { dep.depend; if(childOb) { ...
Object.assign(this.$data,this.$options.data()); 这是,如果,你的data数据中有采用this的写法,在调用this.$options.data() 就会报错,因为data()内部的this指向不对。 vue文档中有关于data的指向问题的解释,如下: 如果你为 data property 使用了箭头函数,则 this 不会指向这个组件的实例,不过你仍然可以将其实...
通过this直接访问到methods里面的函数的原因是:因为methods里的方法通过 bind 指定了this为 new Vue的实例(vm)。通过 this 直接访问到 data 里面的数据的原因是:data里的属性最终会存储到new Vue的实例(vm)上的 _data对象中,访问 this.xxx,是访问Object.defineProperty代理后的 this._data.xxx。
{};// if (typeof data == "function") data = data.call(this);constdata=options.data;this.w...
data(){return{ message:"你好!"} }, created:function() { console.log(this)//在Vue所有的生命周期钩子方法里使用this,this指向使用它的Vue实例this.showMessage1();this.showMessage2();this.showMessage3();//vue实例(构造函数)调用了showMessage3方法(new绑定)}, ...
在Vue中,data选项是个好东西,把数据往里一丢,在一个Vue组件中任何一个地方都可以通过this来读取data中数据。但是要避免滥用this去读取data中数据,至于在哪里要避免滥用,如果滥用会导致什么后果,本文章将会一一揭晓。 一、用this读取data中数据的过程 在Vue源码中会把data中数据添加getter函数和setter函数,将其转成...