vue this.data,vue data获取data里的值
本文主要介绍避免滥用这个在vue中读取数据的相关信息，帮助大家更好的理解和学习使用Vue框架。感兴趣的朋友可以了解一下。
目录
前言1。用这个2读取数据中的数据的过程。Dep.target何时存在3。这哪里滥用读取数据4中的数据。如何避免滥用这个读取数据中的数据？
前言
在Vue中，数据选项是个好东西。一旦数据被抛出，你就可以通过这个在Vue组件的任何地方读取数据。但是，我们应该避免滥用这个来读取数据中的数据。至于在哪里避免滥用，本专栏将揭示它会导致什么后果。
一、用this读取data中数据的过程
在Vue源代码中，data中的数据会添加getter函数和setter函数，转换成responsive。Getter函数代码如下：
函数reactiveGetter() {
var值=getter？getter . call(obj):val；
if (Dep.target) {
dep . depend()；
if (childOb) {
childob . dep . depend()；
if (Array.isArray(value)) {
dependArray(值)；
}
}
}
返回值
}
当这个用来读取data中的数据时，会触发getter函数，其中var value=getter？getter . call(obj):val；获取值后，执行返回值以读取数据。
可以得出结论，当Dep.target存在时，用这个来读取data中的数据会收集依赖关系。如果这被滥用来读取数据中的数据，依赖关系将被重复收集，从而导致性能问题。
二、Dep.target什么时候存在
Dep.target由依赖项分配。依赖也被称为观察者或订阅者。Vue中有三种依赖，其中两种非常常见，分别是watch(监听器)和computed(计算属性)。还有一个隐藏的依赖项3354-Render Watcher，它是在模板第一次渲染时创建的。
Dep.target是在创建依赖项时分配的，依赖项是用构造函数观察器创建的。
函数观察器(vm，expOrFn，cb，options，isRenderWatcher) {
//.
if(type of expOrFn=== function ){
this.getter=expOrFn
}否则{
this . getter=parse path(Expo rfn)；
}
this.value=this .懒？未定义：this . get()；
};
watcher . prototype . get=function get(){
pushTarget(这个)；
尝试{
value=this.getter.call(vm，VM)；
} catch (e) {
}
返回值
};
Dep.target=null
var target stack=[]；
函数pushTarget(目标){
targetStack.push(目标)；
Dep.target=target
}
在构造函数观察器的最后，将执行实例方法get，在实例方法get中执行pushTarget(this)中赋给Dep.target的值。
但是，依赖关系是在第一次呈现Vue页面或组件时创建的，因此导致的性能问题应该是第一次呈现太慢。
三、在何处滥用this去读取data中数据
当Dep.target存在时，执行这些滥用它来读取数据中的数据的代码将导致性能问题。因此，在执行这些代码之前，有必要找出它们是写在哪里的。换句话说，在data中找出这个在哪里被滥用来读取数据，会造成性能问题。
第二节介绍了Dep.target在赋值后会执行value=this.getter.call(vm，vm)，其中this.getter是一个函数，所以如果用这个来读取数据，会收集依赖关系，如果被滥用，会造成性能问题。
This.getter是在创建依赖关系的过程中分配的，每个依赖关系的this.getter是不同的。下面就一个一个介绍吧。
watch (listener)依赖的this.getter是parsePath函数，它的函数参数是listening对象。
var bailRE=新regexp(([^(unicoderegexp . source)。$ _ \ \ d]))；
函数解析路径(路径){
if (bailRE.test(path)) {
返回
}
var segments=path.split( . ));
返回函数(obj) {
for(var I=0；I段.长度；i ) {
如果(！obj) {
返回
}
obj=obj[segments[I]]；
}
返回对象
}
}
下面所示代码中的a和a.b.c作为参数传入parsePath函数，该函数将返回一个函数赋给this.getter执行this.getter.call(vm，vm)将得到this.a和this.a.b.c的值在这个过程中，不会出现滥用this来读取数据中的数据。
观察：{
a:函数(newVal，oldVal){
//做点什么
}
}
vm。$watch(a.b.c ，function (newVal，oldVal) {
//做点什么
})
computed (computed attribute)依赖两种this.getter。如果computed属性的值是一个函数，那么this.getter就是这个函数。如果计算属性的值是一个对象，那么this.getter就是这个对象的get属性的值，get属性的值也是一个函数。在这个函数中，可能会出现滥用它来读取数据中的数据的情况。例如，代码如下所示。
计算值：{
d:函数(){
设结果=0；
对于(让我们键入这个)
如果(this.a[key]。编号20){
result=this.a[key]。num this . b this . c；
}否则{
result=this.a[key]。num this . e this . f；
}
}
返回结果；
}
}
读取计算属性D中的数据存在滥用.其中this.a是数组，Dep.target的值是计算属性D的依赖关系，在这个循环中，这是用来获取A、B、C、E、F的数据，这些数据经过一系列复杂的逻辑运算，反复收集计算属性D的依赖关系，导致获取计算属性D的值的速度较慢，从而产生性能问题。
呈现观察者的this.getter是如下函数：
updateComponent=function() {
vm。_更新(虚拟机。_render()，补水)；
};
其中vm。_render()会将模板生成的渲染函数转换成虚拟DOM(vnode):vnode=render . call(VM。_渲染代理。$ CreateElement)；举例说明渲染函数render是什么。
例如，模板模板：
模板
div class=wrap
span{{b}}/span/p
/div
/模板
渲染函数render将由vue-loader生成，如下所示：
(匿名函数(){
用(这个){
return _c(div ，{
属性：{
class: wrap
}
}，[_c(p ，[_v(_s(a))，_c(span ，[_ v(_ s(b)))])])
}
})
with语句的作用是为一个或一组语句指定默认对象。比如用(this){ a b}相当于this.a this.b，那么在模板template中使用{{ a }}就相当于用这个读取数据中的一个数据。所以在模板template生成的渲染函数render中，可能会出现这种被滥用来读取数据中的数据的场景。例如，代码如下：
模板
div class=wrap
div v-for=列表中的项目
div { { arr[item . index][ name ]} }/div
div {{ obj[item.id][age] }} /div
/div
/div
/模板
在用v-for循环链表数组的过程中，不断地用这个来读取数据中arr和obj的数据，这些数据经过一系列复杂的逻辑运算来反复收集这个依赖，导致第一次渲染的速度很慢，产生性能问题。
四、如何避免滥用this去读取data中数据
综上所述，滥用这个来读取计算属性和模板模板中数据中的数据，会导致依赖关系的重复收集，造成性能问题。如何避免这种情况？
在属性的计算中如何避免
使用ES6对象来解构赋值以避免它。计算属性的值是一个函数，它的参数是Vue的实例化的this对象。在上面这个在计算属性中滥用它的例子中，可以通过这种方式进行优化。
优化前：
计算值：{
d:函数(){
设结果=0；
对于(让我们键入这个)
如果(this.a[key]。编号20){
result=this.a[key]。num this . b this . c；
}否则{
result=this.a[key]。num this . e this . f；
}
}
返回结果；
}
}
优化后：
计算值：{
d({ a，b，c，e，f }) {
设结果=0；
对于(输入a)
如果(一个[键]。编号20) {
result=a[key]。数字b c；
}否则{
result=a[key]。数字e f；
}
}
返回结果；
}
}
上面的解构赋值是用来将数据中的A、B、C、E、F预先赋给对应的变量A、B、C、E、F，然后可以通过计算属性中的这些变量来访问数据，不会触发数据中对应数据的依赖收集。这样数据中的数据用this只读取一次，只触发一次依赖集合，避免了重复依赖集合带来的性能问题。
如何在模板中避免
提前处理v-for循环中使用的数据，不要读取v-for循环中数组和对象类型的数据。这可以在上面模板template中滥用这个的例子中进行优化。
假设list、arr和obj都是服务器返回的数据，并且arr和obj没有在任何模块渲染中使用，那么可以通过这种方式进行优化。
优化前：
模板
div class=wrap
div v-for=列表中的项目
div { { arr[item . index][ name ]} }/div
div {{ obj[item.id][age] }} /div
/div
/div
/模板
优化后：
模板
div class=wrap
div v-for=list data中的项目
div{{item.name}} /div
div{{item.age}}/div
/div
/div
/模板
脚本
const arr=[]；
const obj={}
导出默认值{
data() {
返回{
列表：[]，
}
},
计算值：{
listData:函数({list}) {
list.forEach(item={
item.name=arr[item.index]。姓名；
item.age=obj[item.id]。年龄；
})
退货单；
}
},
}
/脚本
以上是避免滥用这个在Vue中读取数据的详细内容。更多关于避免在Vue中滥用这个的信息，请关注我们的其他相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。