在Vue中,要在data里使用this有以下几种方法:1、使用箭头函数,2、在created生命周期钩子中设置data,3、使用Vue 3的Composition API。下面将详细介绍其中一种方法——使用箭头函数。 1、使用箭头函数:因为箭头函数不会绑定自己的this,而是继承自上下文的this,所以可以在箭头函数中访问组件实例的属性。我们可以在data函数...
在这个例子中,this.$refs.input可以访问input元素,并且this.$refs.input.focus()可以让input元素获得焦点。 四、在生命周期钩子中使用this Vue组件有多个生命周期钩子函数,在这些函数中也可以使用this来访问组件实例。 例如: export default { data() { return { initialized: false }; }, mounted() { this.ini...
在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) { ...
这里可以得出一个结论,在Dep.target存在时,使用this去读取data中数据时会去收集依赖。如果滥用this去读取data中数据,会多次重复地收集依赖,从而产生性能问题。 二、Dep.target什么时候存在 Dep.target是由依赖赋值的。依赖又称为Watcher(侦听者)或者订阅者。在Vue中有三种依赖,其中两种是很常见的,就是watch(侦听器)...
通过this直接访问到methods里面的函数的原因是:因为methods里的方法通过 bind 指定了this为 new Vue的实例(vm)。通过 this 直接访问到 data 里面的数据的原因是:data里的属性最终会存储到new Vue的实例(vm)上的 _data对象中,访问 this.xxx,是访问Object.defineProperty代理后的 this._data.xxx。
varvm =newVue({/*在方法中,this 表示该方法所属的对象。 如果单独使用,this 表示全局对象。 在函数中,this 表示全局对象。 在函数中,在严格模式下,this 是未定义的(undefined)。 在事件中,this 表示接收事件的元素。 类似call() 和 apply() 方法可以将 this 引用到任何对象。*/data: { ...
为避免滥用 `this` 访问 `data` 中的数据，可以采用 ES6 的解构赋值来提前获取 `data` 中的值，这样只在计算属性或模板渲染中读取一次数据，从而避免了多次依赖收集。同时，在模板中使用 `v-for` 循环时，应避免在循环内部对数组或对象进行复杂的逻辑操作，以减少依赖的收集次数，优化性能。通过优化...