Vue中避免滥用this去读取data中数据


Posted in Vue.js onMarch 02, 2021

前言

在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 ? undefined : this.get();
};
Watcher.prototype.get = function get() {
 pushTarget(this);
 try {
  value = this.getter.call(vm, vm);
 } catch (e) {
  
 }
 return value
};
Dep.target = null;
var targetStack = [];
function pushTarget(target) {
 targetStack.push(target);
 Dep.target = target;
}

在构造函数Watcher最后会执行实例方法get,在实例方法get中执行pushTarget(this)中给Dep.target赋值的。

而依赖是在Vue页面或组件初次渲染时创建,所以产生的性能问题应该是首次渲染过慢的问题。

三、在何处滥用this去读取data中数据

在Dep.target存在时去执行这些滥用this去读取data中数据的代码会产生性能问题,故还要搞清楚这些代码是写在哪里才会被执行到,换句话来说,要搞清楚在哪里滥用this去读取data中数据会产生性能问题。

在第二小节中介绍了Dep.target被赋值后会执行value = this.getter.call(vm, vm),其中this.getter是一个函数,那么若在其中有用this去读取data数据,就会去收集依赖,假如滥用的话就会产生性能问题。

this.getter是在创建依赖过程中赋值的,每种依赖的this.getter都是不相同的。下面来一一介绍。

  • watch(侦听器)依赖的this.getterparsePath函数,其函数参数就是侦听的对象。
var bailRE = new RegExp(("[^" + (unicodeRegExp.source) + ".$_\\d]"));
function parsePath(path) {
 if (bailRE.test(path)) {
  return
 }
 var segments = path.split('.');
 return function(obj) {
  for (var i = 0; i < segments.length; i++) {
   if (!obj) {
    return
   }
   obj = obj[segments[i]];
  }
  return obj
 }
}

如下所示的代码中的 aa.b.c作为参数传入parsePath函数会返回一个函数赋值给this.getter,执行this.getter.call(vm, vm)会得到this.athis.a.b.c的值。在这个过程中不会存在滥用this去读取data中数据的场景。

watch:{
 a:function(newVal, oldVal){
 //做点什么
 }
}
vm.$watch('a.b.c', function (newVal, oldVal) {
 // 做点什么
})
  • computed(计算属性)依赖的this.getter有两种,如果计算属性的值是个函数,那么this.getter就是这个函数。如果计算属性的值是个对象,那么this.getter就是这个对象的get属性值,get属性值也是个函数。在这个函数可能会存在滥用this去读取data中数据的场景,举个例子,代码如下所示。
computed:{
 d:function(){
  let result = 0;
  for(let key in this.a){
   if(this.a[key].num > 20){
    result += this.a[key].num + this.b + this.c;
   }else{
    result += this.a[key].num + this.e + this.f;
   }
  }
  return result;
 }
}

在计算属性d中就存在滥用this去读取data数据。其中this.a是个数组,此时Dep.target的值为计算属性d这个依赖,在循环this.a中使用this去获取中a、b、c、e、f的数据,使这些数据进行一系列复杂的逻辑运算来重复地收集计算属性d这个依赖。导致获取计算属性d的值的速度变慢,从而产生性能问题。

  • 渲染Watcher的this.getter是一个函数如下所示:
updateComponent = function() {
 vm._update(vm._render(), hydrating);
};

其中vm._render()会把template模板生成的渲染函数render转成虚拟DOM(VNode):vnode = render.call(vm._renderProxy, vm.$createElement);,举一个例子来说明一下渲染函数render是什么。

例如template模板:

<template>
 <div class="wrap">
 <p>{{a}}<span>{{b}}</span></p>
 </div>
</template>

通过vue-loader会生成渲染函数render,如下所示:

(function anonymous() {
 with(this) {
  return _c('div', {
   attrs: {
    "class": "wrap"
   }
  }, [_c('p', [_v(_s(a)), _c('span', [_v(_s(b))])])])
 }
})

其中with语句的作用是为一个或一组语句指定默认对象,例with(this){ a + b } 等同 this.a + this.b,那么在template模板中使用{{ a }}相当使用this去读取data中的a数据。故在template模板生成的渲染函数render中也可能存在滥用this去读取data中数据的场景。举个例子,代码如下所示:

<template>
 <div class="wrap">
 <div v-for=item in list>
  <div> {{ arr[item.index]['name'] }} </div>
  <div> {{ obj[item.id]['age'] }} </div>
 </div>
 </div>
</template>

其中用v-for循环list数组过程中,不断用this去读取data中arr、obj的数据,使这些数据进行一系列复杂的逻辑运算来重复收集这个依赖,导致初次渲染的速度变慢,从而产生性能问题。

四、如何避免滥用this去读取data中数据

综上所述在计算属性和template模板中滥用this去读取data中数据会导致多次重复地收集依赖,从而产生性能问题,那要怎么避免这种情况。

  • 计算属性中如何避免

用ES6对象解构赋值来避免,计算属性的值是一个函数,其参数是Vue的实例化this对象,在上述计算属性中滥用this的例子中可以这样优化。

优化前:

computed:{
 d:function(){
  let result = 0;
  for(let key in this.a){
   if(this.a[key].num > 20){
    result += this.a[key].num + this.b + this.c;
   }else{
    result += this.a[key].num + this.e + this.f;
   }
  }
  return result;
 }
}

优化后:

computed: {
 d({ a, b, c, e, f }) {
 let result = 0;
 for (let key in a) {
  if (a[key].num > 20) {
  result += a[key].num + b + c;
  } else {
  result += a[key].num + e + f;
  }
 }
 return result;
 }
}

以上利用解构赋值提前把data数据中的a、b、c、e、f赋值给对应的变量a、b、c、e、f,然后在计算属性中可以通过这些变量访问data数据的,且不会触发data中对应数据的依赖收集。这样只用this读取了一次data中的数据,只触发了一次依赖收集,避免了多次重复地依赖收集产生的性能问题。

  • template模板中如何避免

提前处理v-for循环所用的数据,不要在v-for循环中去读取数组、对象类型的数据。在上述template模板中滥用this的例子中可以这样优化。

假设list、arr、obj皆是服务端返回来的数据,且arr和obj没有用到任何模块渲染中,可以这样优化。

优化前:

<template>
 <div class="wrap">
 <div v-for=item in list>
  <div> {{ arr[item.index]['name'] }} </div>
  <div> {{ obj[item.id]['age'] }} </div>
 </div>
 </div>
</template>

优化后:

<template>
 <div class="wrap">
 <div v-for=item in listData>
  <div{{item.name}} </div>
  <div>{{item.age}}</div>
 </div>
 </div>
</template>
<script>
const arr = [];
const obj = {}
export default {
 data() {
 return {
  list: [],
 }
 },
 computed: {
 listData: function ({list}) {
  list.forEach(item => {
  item.name = arr[item.index].name;
  item.age = obj[item.id].age;
  })
  return list;
 }
 },
}
</script>

以上就是Vue中避免滥用this去读取data中数据的详细内容,更多关于Vue中避免滥用this的资料请关注三水点靠木其它相关文章!

Vue.js 相关文章推荐
vue组件中节流函数的失效的原因和解决方法
Dec 02 Vue.js
vue实现购物车的小练习
Dec 21 Vue.js
Vue看了就会的8个小技巧
Jan 21 Vue.js
Vue 3自定义指令开发的相关总结
Jan 29 Vue.js
vue仿携程轮播图效果(滑动轮播,下方高度自适应)
Feb 11 Vue.js
详解vue3中组件的非兼容变更
Mar 03 Vue.js
vue前端工程的搭建
Mar 31 Vue.js
vue-cropper组件实现图片切割上传
May 27 Vue.js
vue+springboot实现登录验证码
May 27 Vue.js
vue3使用vuedraggable实现拖拽功能
Apr 06 Vue.js
vue的项目如何打包上线
Apr 13 Vue.js
关于vue-router-link选择样式设置
Apr 30 Vue.js
vue脚手架项目创建步骤详解
Mar 02 #Vue.js
vue-cli中实现响应式布局的方法
Mar 02 #Vue.js
vue实现桌面向网页拖动文件的示例代码(可显示图片/音频/视频)
Mar 01 #Vue.js
vue 使用饿了么UI仿写teambition的筛选功能
Mar 01 #Vue.js
vue实现拖拽进度条
Mar 01 #Vue.js
vue 使用 v-model 双向绑定父子组件的值遇见的问题及解决方案
Mar 01 #Vue.js
vue前端和Django后端如何查询一定时间段内的数据
Feb 28 #Vue.js
You might like
各种战术和打法的原创者
2020/03/04 星际争霸
PHP+MYSQL会员系统的登陆即权限判断实现代码
2011/09/23 PHP
CodeIgniter生成静态页的方法
2016/05/17 PHP
Yii2实现上下联动下拉框功能的方法
2016/08/10 PHP
PHP错误处理函数register_shutdown_function使用示例
2017/07/03 PHP
jQuery 动态酷效果实现总结
2009/12/27 Javascript
JavaScript中两种链式调用实现代码
2011/01/12 Javascript
javascript学习笔记(九) js对象 设计模式
2012/06/19 Javascript
Javascript中valueOf与toString区别浅析
2013/03/19 Javascript
jquery中的on方法使用介绍
2013/12/29 Javascript
JavaScript检测实例属性, 原型属性
2015/02/04 Javascript
不依赖Flash和任何JS库实现文本复制与剪切附源码下载
2015/10/09 Javascript
简单介绍JavaScript数据类型之隐式类型转换
2015/12/28 Javascript
Bootstrap表单组件教程详解
2016/04/26 Javascript
Bootstrap3制作自己的导航栏
2016/05/12 Javascript
利用angular.copy取消变量的双向绑定与解析
2016/11/25 Javascript
input type=file 选择图片并且实现预览效果的实例
2017/10/26 Javascript
JavaScript实现创建自定义对象的常用方式总结
2018/07/09 Javascript
JS函数进阶之prototy用法实例分析
2020/01/15 Javascript
解决vue elementUI 使用el-select 时 change事件的触发问题
2020/11/17 Vue.js
Python中的字符串操作和编码Unicode详解
2017/01/18 Python
Python入门_条件控制(详解)
2017/05/16 Python
python实现石头剪刀布程序
2021/01/20 Python
django 2.2和mysql使用的常见问题
2019/07/18 Python
python中如何打包用户自定义模块
2020/09/23 Python
利用Python实现最小二乘法与梯度下降算法
2021/02/21 Python
移动端Html5页面生成图片解决方案
2018/08/07 HTML / CSS
如何打开WebSphere远程debug
2014/10/10 面试题
医德医风自我评价
2014/09/19 职场文书
四风问题自我剖析材料
2014/10/07 职场文书
中学生检讨书范文
2014/11/03 职场文书
2015夏季作息时间调整通知
2015/04/24 职场文书
2015年副班长工作总结
2015/05/15 职场文书
2016年小学植树节活动总结
2016/03/16 职场文书
详细介绍python类及类的用法
2021/05/31 Python
Vue组件化(ref,props, mixin,.插件)详解
2022/05/15 Vue.js