前言
在Vue中,data选项是个好东西,把数据往里一丢,在一个Vue组件中任何一个地方都可以通过this来读取data中数据。但是要避免滥用this去读取data中数据,至于在哪里要避免滥用,如果滥用会导致什么后果,本专栏将会一一揭晓。
一、用this读取data中数据的过程
在Vue源码中会把data中数据添加getter函数和setter函数,将其转成响应式的。getter函数代码如下所示:
function reactiveGetter() {
var value = getter ? getter.call(obj) : val;
if (Dep.target) {
dep.depend();
if (childOb) {
childOb.dep.depend();
if (Array.isArray(value)) {
dependArray(value);
}
}
}
return value
}
用this读取data中数据时,会触发getter函数,在其中通过 var value = getter ? getter.call(obj) : val;
获取到值后执行 return value
,实现读取数据的目的。
但是在其间还有一段代码,在这段代码中会经过一系列复杂的逻辑运算来收集依赖。这里不介绍如何收集依赖,如果想了解可以看这篇专栏。这里只要知道在Dep.target存在时才会去收集依赖。
这里可以得出一个结论,在Dep.target存在时,使用this去读取data中数据时会去收集依赖。如果滥用this去读取data中数据,会多次重复地收集依赖,从而产生性能问题。
二、Dep.target什么时候存在
Dep.target是由依赖赋值的。依赖又称为Watcher(侦听者)或者订阅者。在Vue中有三种依赖,其中两种是很常见的,就是watch(侦听器)和computed(计算属性)。还有一种隐藏的依赖———渲染Watcher,在模板首次渲染的过程中创建的。
Dep.target是在依赖创建时被赋值,依赖是用构造函数Watcher创建。
function Watcher(vm, expOrFn, cb, options, isRenderWatcher) {
//...
if (typeof expOrFn === 'function') {
this.getter = expOrFn;
} else {
this.getter = parsePath(expOrFn);
}
this.value = this.lazy ? undefined : this.get();
};
Watcher.prototype.get = function get() {
pushTarget(this);
try {
value = this.getter.call(vm,