『前端优化』Vue中避免滥用this去读取data中数据

墨蓝 2022-11-14 11:46 192阅读 0赞

前言

在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, 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.getter`是`parsePath`函数，其函数参数就是侦听的对象。
    
        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
          }
        }
    
    如下所示的代码中的 `a` 和 `a.b.c`作为参数传入`parsePath`函数会返回一个函数赋值给`this.getter`，执行`this.getter.call(vm, vm)`会得到`this.a`和`this.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模板：

通过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 listData>
          <div{
        {item.name}} </div>
            <div>{
        {item.age}}</div>
        </div>
      </div>
    </template>
    <script>
    export default {
      data() {
        return {
          list: [],
        }
      },
      created(){
        // 在这里定义arr和obj避免被转成响应式
        this.arr = [];
        this.obj = {};
      },
      computed: {
        listData: function ({list}) {
          list.forEach(item => {
            item.name = this.arr[item.index].name;
            item.age = this.obj[item.id].age;
          })
          return list;
        }
      },
    }
    </script>

> 转自：掘金 - 红尘炼心
> 
> https://juejin.cn/post/6934911314871451685