Vue 3 Reactivity: activeEffect & ref
In this lesson we’ll continue to build out our reactivity code by fixing a small bug and then implementing reactive references, much like you might have seen in Vue 3. The bottom of our current code from the last lesson looks like this:
...
let produ...
philipdevblog.hashnode.dev6 min read
belle mere
effect(() => { total = salePrice.value * product.quantity; }); effect(() => { salePrice.value = product.price * 0.9; });If I change the order of the two effects, there will be a stack overflow problem.
The first effect is registered to the salePrice's Set. When it goes to the second effect, since the value of salePrice is changed, so the first effect is called. When the get event of salePrice happens, the second effect is registered to the salePrice's Set too. So in the 'Foreach' function it's called also. This causes the the first effect is called again, and finally lead to the stack overflow.