watch 同时使用 {immediate: true, deep: true}，开发中可以使用，打包后使用vite preview命令，无法正常预览，上线到服务器也无法查看。

[Cqqgyh]

Vue version

3.2.47

Link to minimal reproduction

https://github.com/Cqqgyh/vue3-init-demo

Steps to reproduce

/src/components/HelloWorld.vue

bug

// todo start bug
const part2RightTextList = reactive([
{
text: 'demo',
isChecked: true,
}
])
// 如果在目录中解开注释，打包后将无法预览查看
// 重现条件：同时使用{immediate: true, deep: true}
watch( ()=> part2RightTextList, (newValue, oldValue) => {
part2RightTextList[0].isChecked = !!newValue.every(item => !item.isChecked);
}, {immediate: true, deep: true})
// end bug

What is expected?

希望解决掉这个bug

What is actually happening?

watch 同时使用 {immediate: true, deep: true}，开发中可以使用，打包后使用vite preview命令，无法正常预览，上线到服务器也无法查看。

System Info

No response

Any additional comments?

No response

[baiwusanyu-c]

In the reproduction project you provided, I didn't find any place that can trigger the change of part2RightTextList, so I can't locate the problem. Please provide more valid information

[Cqqgyh]

在您提供的复制项目中，我没有找到任何可以触发更改的地方，因此无法定位问题。请提供更多有效信息part2RightTextList

en:You don't need to trigger it intentionally, or you can write any trigger you like. If the code contains a watch command and is configured with {immediate: true, deep: true}, and you execute vite build, followed by vite preview, and then open the browser page, you will notice that the request for the document file is always in a pending state. If you remove {immediate: true, deep: true}, and repeat vite buildand vite preview, the page will open normally.
Triggering the bug scenario: configuring {immediate: true, deep: true} at the same time.

cn:不需要特意触发，或者你可以任意写一个触发，只要是在代码中存在着 watch 且同时配置 {immediate: true, deep: true} ,执行 vite build ，再执行 vite preview ，然后在浏览器页面打开，会发现请求信息中document文件一直是pending状态 ，之后将 {immediate: true, deep: true} 删除，再次重复 vite build，vite preview 会发现页面正常打开。
触发BUG场景:同时配置 {immediate: true, deep: true}

[baiwusanyu-c]

{ immediate: true, deep: true } 这会导致组件进入时直接运行一次回调，在回调中你修改了监听的对象这会导致回调再次触发造成崩溃，我不认为这是一个好的或者说是一个规范的用法
{ immediate: true, deep: true } This will cause a callback to be run directly when the component enters. In the callback, you modify the listening object, which will cause the callback to trigger again and cause a crash. I don't think this is a good or is a canonical usage

watch(() => part2RightTextList, (newValue, oldValue) => {
      if(newValue !== oldValue){
        part2RightTextList[0].isChecked = !!newValue.every((item) => !item.isChecked);
      }
    }, { immediate: true, deep: true });

[Cqqgyh]

{ immediate: true, deep: true } 这会导致组件进入时直接运行一次回调，在回调中你修改了监听的对象这会导致回调再次触发造成崩溃，我不认为这是一个好的或者说是一个规范的用法 { immediate: true, deep: true } This will cause a callback to be run directly when the component enters. In the callback, you modify the listening object, which will cause the callback to trigger again and cause a crash. I don't think this is a good or is a canonical usage

watch(() => part2RightTextList, (newValue, oldValue) => {
      if(newValue !== oldValue){
        part2RightTextList[0].isChecked = !!newValue.every((item) => !item.isChecked);
      }
    }, { immediate: true, deep: true });

是的,我明白了你的意思，确实是不规范造成的，打扰了，这个问题困扰我了很久，一直没有发现注意到是在回调中再次触发导致的，再次感谢。
Yes, I understand what you meant. It was indeed caused by non-standard practices. I apologize for bothering you with this. This issue has troubled me for a long time, and I didn't notice that it was triggered again in the callback. Thanks again.