Vue computed overhead (v2)

Revision 2 of this benchmark created on

Preparation HTML

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

Setup

const { effectScope, ref, computed } = Vue
const scope = effectScope(true)

Teardown

scope.stop()

Test runner

Ready to run.

Testing in
TestOps/sec
One by one
scope.run(() => {
	const val = ref(0)
	const plus1 = computed(() => val.value + 1)
	const plus2 = computed(() => plus1.value + 1)
	const plus3 = computed(() => plus2.value + 1)
  
	for (let i = 0; i < 1000; i++) {
		val.value = val.value + plus3.value
	}
})
ready
Single
scope.run(() => {
	const val = ref(0)
	const plus3 = computed(() => val.value + 1 + 1 + 1)
  
	for (let i = 0; i < 1000; i++) {
		val.value = val.value + plus3.value
	}
})
ready
Multiple single ones, computed in parallel
scope.run(() => {
	const val = ref(0)
	const plus1 = computed(() => val.value + 1)
	const plus2 = computed(() => val.value + 1)
	const plus3 = computed(() => val.value + 1)
  
	for (let i = 0; i < 1000; i++) {
		val.value = val.value + plus1.value + plus2.value + plus2.value
	}
})
ready
Multiple single ones (control)
scope.run(() => {
	const val = ref(0)
	const plus3a = computed(() => val.value + 1 + 1 + 1)
	const plus3b = computed(() => val.value + 1 + 1 + 1)
	const plus3c = computed(() => val.value + 1 + 1 + 1)
  
	for (let i = 0; i < 1000; i++) {
		val.value = val.value + plus3a.value
	}
})
ready

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.