vue性能优化篇--持续更新中

708 阅读1分钟
1、Vue重写了变量的getter/setter,导致获取某个属性或者改写某个属性的时间变长,CPU占用更多。

// 代码有所删减
function defineReactive$$1 (obj, key, val) {
  var dep = new Dep();
  
  var property = Object.getOwnPropertyDescriptor(obj, key);
  // 从源码也可以看到,可以把obj的configurable置为false,Vue便不会设置getter和setter
  if (property && property.configurable === false) {
    return
  }
  // cater for pre-defined getter/setters
  var getter = property && property.get;
  var setter = property && property.set;

  Object.defineProperty(obj, key, {
    enumerable: true,
    configurable: true,
    get: function reactiveGetter () {
      var value = getter ? getter.call(obj) : val;
      return value
    },
    set: function reactiveSetter (newVal) { 
      var value = getter ? getter.call(obj) : val;
      if (setter) {
        setter.call(obj, newVal);
      } else {
        val = newVal;
      }
      dep.notify();
    }
  });
}

    如何辨别setter/getter被覆盖的Object:Chrome控制台会直接打印没有覆盖的Object值,而设置了的将会显示“(...)”,要等到点击变量的时候才会去获取它当前的值并显示出来。

建议:减少不必要的三方组件到data中,或者把obj的configurable置为false

···

2、避免使用watch监听赋值,控制好数据变更,可以考虑使用vuex管理数据状态