watchEffect is called twice on initialisation

[cexbrayat]

Version

3.0.0-rc.11

Reproduction link

https://jsfiddle.net/qrh0ubaj/

Steps to reproduce

Consider this component

setup() {
  const price = ref(10);
  const history = ref<Array<string>>([]);
  watchEffect(() => {
    history.value.push(`Price changed to ${price.value}`);
  });
  return { price, history };
}

What is expected?

In rc.10, it only displays one change when initialised (Price changed to 10)

What is actually happening?

In rc.11, it displays this change twice.

[HcySunYang]

Related to this: 5f40539
Consider the following use cases, they can all reproduce the issue:

watchEffect(() => {
      // track
      price.value
      // trigger
      price.value = 20
});

watch(price, () => {
      // trigger
      price.value = 20
}, { immediate: true })  // immediate

[unbyte]

As a supplement to what @HcySunYang pointed out, calling some methods can both trigger and track in one effect, which can lead to an infinite recursion in some scenarios.

e.g. Array.prototype.push, gets .length and sets values,

  const a = reactive([])

  const b = ref(0)
  const c = ref(0)

  watchEffect(() => {
    if (b < 10)
      a.push(1)
  })

  watchEffect(() => {
    if (c > -10)
      a.push(1)
  })

[unbyte]

Oh, it was fixed while I was typing 😁