core: Vue infinite loop detection should throw a real error in dev, not just log a warning to console

Vue version

3.2.45

Link to minimal reproduction

github repo

Steps to reproduce

  1. pnpm dev, open chrome dev tool
  2. click the button
  3. pnpm dev && pnpm preview, click button again
  4. compare both console log

What is expected?

both dev and prod mode should work in same way; or the code did not cause recursively update

What is actually happening?

in dev mode, recursive update will stop auto; in prod mode, it just continue run

System Info

System:
    OS: Windows 10 10.0.22621
    CPU: (12) x64 Intel(R) Core(TM) i7-8700 CPU @ 3.20GHz
    Memory: 21.69 GB / 31.92 GB
  Binaries:
    Node: 16.17.1 - ~\AppData\Local\fnm_multishells\17284_1672413295400\node.EXE
    npm: 8.15.0 - ~\AppData\Local\fnm_multishells\17284_1672413295400\npm.CMD
  Browsers:
    Edge: Spartan (44.22621.963.0), Chromium (108.0.1462.54)
    Internet Explorer: 11.0.22621.1
  npmPackages:
    vue: ^3.2.45 => 3.2.45

Any additional comments?

sfc.vuejs.org even in PROD mode, it still use dev vue file so i upload a github repo.

the key code

watch(() => [state.value.deep], () => {
  state.value = { deep: false }
  // console.log('watch', ++count)
})

====

english is not my first lang, so i write a chinese version desc here too.

复现:

  1. clone repo后,跑dev,尝试点击button
  2. 观察控制台输出
  3. pnpm dev && pnpm preview, 再次点击button
  4. 再次观察控制台输出

期望: dev与prod mode两边的行为一致,或者这段代码根本不会产生死循环更新

实际: dev会在安全范围内停掉这个watch prod则会跑到死

About this issue

  • Original URL
  • State: closed
  • Created 2 years ago
  • Comments: 19 (11 by maintainers)

Commits related to this issue

Most upvoted comments

@Inori-Lover 🤔 Hmmm it makes sense.

I think we should change the warning to an error too and it’s a serious error to be fixed by developers.

@sxzz i know vue team has warning me/us in console to friendly reminder me modify my code, but catch an error then change it to a warn is not a good practice, right? it make wrong code “work”. and we can not expect all dever open dev tool all the time

@smallnine9 @sxzz Why was this PR closed without comment? I think this is a much needed feature and should be merged soon.

Resolved in #7447

+++ watch(() => state.value.deep, () => {
--- watch(() => [state.value.deep], () => {

or check the new value and old value yourself

It will avoid recursive updates.