在Vue中,要在data里使用this有以下几种方法:1、使用箭头函数,2、在created生命周期钩子中设置data,3、使用Vue 3的Composition API。下面将详细介绍其中一种方法——使用箭头函数。 1、使用箭头函数:因为箭头函数不会绑定自己的this,而是继承自上下文的this,所以可以在箭头函数中访问组件实例的属性。我们可以在data函数...
总结 无论是setup返回的数据还是data数据，还有$data，$el...都是通过Proxy代理，在组件初始化阶段执行。代理数据的实现是将setup执行结果setupState中数据返回，再在渲染render时绑定this指向；像$el这类便于用户开发使用的，同样是在Proxy中处理，根据不同的key处理不同的逻辑。
在Dep.target存在时去执行这些滥用this去读取data中数据的代码会产生性能问题,故还要搞清楚这些代码是写在哪里才会被执行到,换句话来说,要搞清楚在哪里滥用this去读取data中数据会产生性能问题。 在第二小节中介绍了Dep.target被赋值后会执行value =this.getter.call(vm, vm),其中this.getter是一个函数,那么若在...
在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) { ...
通过this直接访问到methods里面的函数的原因是:因为methods里的方法通过 bind 指定了this为 new Vue的实例(vm)。通过 this 直接访问到 data 里面的数据的原因是:data里的属性最终会存储到new Vue的实例(vm)上的 _data对象中,访问 this.xxx,是访问Object.defineProperty代理后的 this._data.xxx。
在Vue中,data选项是个好东西,把数据往里一丢,在一个Vue组件中任何一个地方都可以通过this来读取data中数据。但是要避免滥用this去读取data中数据,至于在哪里要避免滥用,如果滥用会导致什么后果,本文章将会一一揭晓。 一、用this读取data中数据的过程 在Vue源码中会把data中数据添加getter函数和setter函数,将其转成...
在我没接触vue之前我不着调this是啥压根就没有接触过,在我学过了vue之后我知道了this,那时候理解的this就是你要使用data中的属性或调用methods中的方法等其他东西都要用this去调用,那时候其实我还是不知道this是啥,后面慢慢的才知道,当然我知道应该就是八股文背出来的,通过今天读这个源码,让我理解的更加深刻了,...
简介:Vue中避免滥用this去读取data中数据 在构造函数Watcher最后会执行实例方法get,在实例方法get中执行pushTarget(this)中给Dep.target赋值的。 而依赖是在Vue页面或组件初次渲染时创建,所以产生的性能问题应该是首次渲染过慢的问题。 三、在何处滥用this去读取data中数据 ...
在 Vue 中，通过 `this` 访问 `data` 中的数据是一种常见的操作，但这种做法在某些情况下可能导致不必要的性能问题。本文旨在探讨如何避免滥用 `this` 访问 `data` 中数据，以及滥用 `this` 的影响和如何优化代码以提高性能。在 Vue 的源码中，`data` 的值会被封装成响应式的，这意味着当访问 ...