【Vuejs】Vuejs 中避免滥用 this 读取 data 中数据

本是古典何须时尚 2022-10-19 05:43 177阅读 0赞

![0974f3162e9813dc5f58074756139b49.png][]

作者：红尘炼心

https://juejin.cn/post/6934911314871451685

## 前言    ##

在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>

![5840e67bcf5cd045fe0ac2bf2e9fe33d.gif][]

[1. JavaScript 重温系列（22篇全）][1. JavaScript _22]

[2. ECMAScript 重温系列（10篇全）][2. ECMAScript _10]

[3. JavaScript设计模式 重温系列（9篇全）][3. JavaScript_ _9]

4. [正则 / 框架 / 算法等 重温系列（16篇全）][_ _ _ _ _16]

5. [Webpack4 入门（上）][Webpack4]|| [Webpack4 入门（下）][Webpack4 1]

6. [MobX 入门（上）][MobX] || [MobX 入门（下）][MobX 1]

7. 120[\+篇原创系列汇总][Link 1]

![8b19f44ac9c13f98c92b8d1f3d885137.gif][]

回复“**加群**”与大佬们一起交流学习~

点击“**阅读原文**”查看 120+ 篇原创文章

[0974f3162e9813dc5f58074756139b49.png]: /images/20221005/b1e6f3df0f414ed3b45afb0eb2e0614c.png
[5840e67bcf5cd045fe0ac2bf2e9fe33d.gif]: /images/20221005/dc64f9c5041a4b9da7d096122ff78276.png
[1. JavaScript _22]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c224ea86b5adfc10c3aa1841be3879b9360d671e98cc73391c2490246f1348857b9821d32c&idx=1&mid=2458453187&scene=21&sn=a69b4d7d991867a07a933f86e66b9f55#wechat_redirect
[2. ECMAScript _10]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c224e086b5adf6dad41a0d36b77a9bfb4bc9f0d29a816266b3e28c892e54274967dbce380b&idx=1&mid=2458453193&scene=21&sn=e5392cb77bc17c9e94b6c826b5f52a83#wechat_redirect
[3. JavaScript_ _9]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c224e386b5adf554ab928cdeaf7ee16dbb2d895be17f2a12a59054a75b913470ca7649bbc7&idx=1&mid=2458453194&scene=21&sn=e7f0734b04484bee5e10a85a7cbb85c1#wechat_redirect
[_ _ _ _ _16]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c224e286b5adf432850f82db18cc8647d639836798cf16b478d9a6f7c81df87c6da5257684&idx=1&mid=2458453195&scene=21&sn=1e0c8b7ea8ddc207b523ec0a636a5254#wechat_redirect
[Webpack4]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c2251f86b5ac09dbbbb7c8e1d80c6cbd793a523cdfa690f8734def57812e616b9906aeec79&idx=1&mid=2458453302&scene=21&sn=904e40a421024ea0d394e9850b674012#wechat_redirect
[Webpack4 1]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c2251e86b5ac08464872cd880811423e0d1bbcebbe11dcac9d99fa38c5332c089c06d65d95&idx=1&mid=2458453303&scene=21&sn=422f2b5e22c3b0e91a8353ee7e53fed9#wechat_redirect
[MobX]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c2264c86b5af5aa7300a04d55efead6223e310d68e10222cd3577a25c783d3429f00767960&idx=1&mid=2458453605&scene=21&sn=0a506769d5eeb7953f676e93fb4d18eb#wechat_redirect
[MobX 1]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c2264086b5af5611524eedb0d409afe86d859dce6ceff1c17ddab49d353c385e45611a73fa&idx=1&mid=2458453609&scene=21&sn=f0c22e82f2537204d9b173161bae6b82#wechat_redirect
[Link 1]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c224dd86b5adcbd98189315e60de6a0106993690b69927cc1c1f19fd8f591fefce4e3db51f&idx=2&mid=2458453236&scene=21&sn=daf00392f960c115463c5aaf980620b4#wechat_redirect
[8b19f44ac9c13f98c92b8d1f3d885137.gif]: /images/20221005/2eddf73169374aa6ba24c85866f5e673.png