Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

perf(reactivity): calculate embedded computed() on-demand #5912

Open
wants to merge 5 commits into
base: main
Choose a base branch
from

Conversation

johnsoncodehk
Copy link
Member

@johnsoncodehk johnsoncodehk commented May 13, 2022

Issue: #1811

If ComputedRef new value no changed, this PR make depended ComputedRefs will not recalculate.

Before behavior:

let sec_counter = 0
let min_counter = 0
let hour_counter = 0

const ms = ref(0)
const sec = computed(() => { sec_counter++; return Math.floor(ms.value / 1000) })
const min = computed(() => { min_counter++; return Math.floor(sec.value / 60) })
const hour = computed(() => { hour_counter++; return Math.floor(min.value / 60) })

for (ms.value = 0;  ms.value < 10000000; ms.value += 100) {
  hour.value
}

console.log(`sec: ${sec.value}, sec_counter: ${sec_counter}`) // sec: 10000, sec_counter: 100001
console.log(`min: ${min.value}, min_counter: ${min_counter}`) // min: 166, min_counter: 100001
console.log(`hour: ${hour.value}, hour_counter: ${hour_counter}`) // hour: 2, hour_counter: 100001

New behavior:

let sec_counter = 0
let min_counter = 0
let hour_counter = 0

const ms = ref(0)
const sec = computed(() => { sec_counter++; return Math.floor(ms.value / 1000) })
const min = computed(() => { min_counter++; return Math.floor(sec.value / 60) })
const hour = computed(() => { hour_counter++; return Math.floor(min.value / 60) })

for (ms.value = 0;  ms.value < 10000000; ms.value += 100) {
  hour.value
}

console.log(`sec: ${sec.value}, sec_counter: ${sec_counter}`) // sec: 10000, sec_counter: 100001
console.log(`min: ${min.value}, min_counter: ${min_counter}`) // min: 166, min_counter: 10001
console.log(`hour: ${hour.value}, hour_counter: ${hour_counter}`) // hour: 2, hour_counter: 167

@netlify
Copy link

@netlify netlify bot commented May 13, 2022

Deploy Preview for vuejs-coverage failed.

Name Link
🔨 Latest commit 63a06a1
🔍 Latest deploy log https://app.netlify.com/sites/vuejs-coverage/deploys/627ec90de07628000954359b

@johnsoncodehk johnsoncodehk marked this pull request as ready for review May 13, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

1 participant