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+iview分页组件的封装
Nov 17 Vue.js
使用vue编写h5公众号跳转小程序的实现代码
Nov 27 Vue.js
vue实现轮播图帧率播放
Jan 26 Vue.js
学习 Vue.js 遇到的那些坑
Feb 02 Vue.js
vue实现禁止浏览器记住密码功能的示例代码
Feb 03 Vue.js
vue3.0 项目搭建和使用流程
Mar 04 Vue.js
vue实现倒计时功能
Mar 24 Vue.js
vue中三级导航的菜单权限控制
Mar 31 Vue.js
Vue监视数据的原理详解
Feb 24 Vue.js
Vue如何清空对象
Mar 03 Vue.js
vue中div禁止点击事件的实现
Apr 02 Vue.js
Vue ECharts实现机舱座位选择展示功能
May 15 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
javascript 不间断的图片滚动并可点击
2010/01/15 Javascript
js弹出层(jQuery插件形式附带reLoad功能)
2013/04/12 Javascript
使用cluster 将自己的Node服务器扩展为多线程服务器
2014/11/10 Javascript
AngularJS基础学习笔记之指令
2015/05/10 Javascript
JS日期对象简单操作(获取当前年份、星期、时间)
2016/10/26 Javascript
Angular4学习笔记之新建项目的方法
2017/07/18 Javascript
微信web端后退强制刷新功能的实现代码
2018/03/04 Javascript
jQuery+koa2实现简单的Ajax请求的示例
2018/03/06 jQuery
Vue 自定义标签的src属性不能使用相对路径的解决
2019/09/17 Javascript
微信小程序实现录音功能
2019/11/22 Javascript
微信小程序复选框实现多选一功能过程解析
2020/02/14 Javascript
微信小程序自定义tabBar的踩坑实践记录
2020/11/06 Javascript
python下MySQLdb用法实例分析
2015/06/08 Python
Python自动化开发学习之三级菜单制作
2017/07/14 Python
Python数据结构之单链表详解
2017/09/12 Python
Python通过调用mysql存储过程实现更新数据功能示例
2018/04/03 Python
Python贪心算法实例小结
2018/04/22 Python
Python sklearn KFold 生成交叉验证数据集的方法
2018/12/11 Python
从多个tfrecord文件中无限读取文件的例子
2020/02/17 Python
python 已知一个字符,在一个list中找出近似值或相似值实现模糊匹配
2020/02/29 Python
jupyter修改文件名方式(TensorFlow)
2020/04/21 Python
解决matplotlib.pyplot在Jupyter notebook中不显示图像问题
2020/04/22 Python
瑞典香水、须后水和美容产品购物网站:Parfym-Klick.se
2019/12/29 全球购物
企业演讲稿范文
2013/12/28 职场文书
2014年教师政治学习材料
2014/06/02 职场文书
生产助理岗位职责
2014/06/18 职场文书
高中综合实践活动总结
2014/07/07 职场文书
纪律教育月活动总结
2014/08/26 职场文书
财政专业大学生职业生涯规划书
2014/09/17 职场文书
夫妻忠诚协议范文
2014/11/16 职场文书
基层党支部承诺书
2015/04/30 职场文书
找规律教学反思
2016/02/23 职场文书
Python 恐龙跑跑小游戏实现流程
2022/02/15 Python
MySQL 中如何归档数据的实现方法
2022/03/16 SQL Server
联想win10摄像头打不开怎么办?win10笔记本摄像头打不开解决办法
2022/04/08 数码科技
Linux安装Docker详细教程
2022/07/07 Servers