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