vueでreactiveとrefの更新時のパフォーマンス比較

2024.10.04 - Tweet

vueでreactiveとrefの更新時のパフォーマンス比較

[reactive]と[ref]と[通常]と[通常オブジェクト]の4種の変数で、値に1を追加する処理を10万回行った時の時間を計測した。

let reac = Vue.reactive({a: 0});
let ref_a = Vue.ref(0);
let a = 0;
let objA = {a: 0};

//--------------------------------------

console.time("reac");
for(let i=0; 100000>i; i++){
	reac.a++;
}
console.timeEnd("reac");

//--------------------------------------

console.time("ref_a");
for(let i=0; 100000>i; i++){
	ref_a.value++;
}
console.timeEnd("ref_a");

//--------------------------------------

console.time("a");
for(let i=0; 100000>i; i++){
	a++;
}
console.timeEnd("a");

console.time("objA");
for(let i=0; 100000>i; i++){
	objA.a++;
}
console.timeEnd("objA");

let reac = Vue.reactive({a: 0});

let ref_a = Vue.ref(0);

let a = 0;

let objA = {a: 0};

//--------------------------------------

console.time("reac");

for(let i=0; 100000>i; i++){

reac.a++;

}

console.timeEnd("reac");

//--------------------------------------

console.time("ref_a");

for(let i=0; 100000>i; i++){

ref_a.value++;

}

console.timeEnd("ref_a");

//--------------------------------------

console.time("a");

for(let i=0; 100000>i; i++){

a++;

}

console.timeEnd("a");

console.time("objA");

for(let i=0; 100000>i; i++){

objA.a++;

}

console.timeEnd("objA");

結果は

reac:  87.7 ms
ref_a: 14.2 ms
a:     1.6 ms
objA:  1.8 ms

reac: 87.7 ms

ref_a: 14.2 ms

a: 1.6 ms

objA: 1.8 ms

reactiveが約50倍, refが約10倍ぐらい遅かった。
しかし、refでref({a: 0})のようにobjectを使った場合、reactiveとほぼ同じだった（71.7 ms）。
これはrefでobjectを使用した場合、内部でreactiveを使用するという挙動のためだと思う。

大量にアクセスする場合に速くする方法

let rawObj = Vue.toRaw(reac);
console.log(rawObj.a);

1 2	let rawObj = Vue.toRaw(reac); console.log(rawObj.a);

のようにtoRawでプレーンオブジェクトを取得し、rawObjにアクセスすれば速くなる。
またrawObjを変更した場合はリアクティブを発火せずに変更できる。

BLOG