html页面怎么获取vue里面的data,Vue中避免滥用this去读取data中数据

这篇文章主要介绍了Vue中避免滥用this去读取data中数据的的相关资料，帮助大家更好的理解和学习使用vue框架，感兴趣的朋友可以了解下

前言

在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存在时，使用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