全局提示 Message组件，在vue 3.2.38中，导致数据更新异常，样式也出现了一些问题

[lainbo]

• I'm sure this does not appear in the issue list of the repository

Basic Info

• Package Name And Version: @arco-design/web-vue@2.36.0
• Framework version: 3.2.38
• Browser: chrome105.0.0.0
• Reproduction Link: https://codesandbox.io/s/async-shadow-71fjcm?file=/src/App.vue

Extra info

1. 该bug目前仅在vue 3.2.38出现，3.2.38 有对watch进行bugfix，详见：https://github.com/vuejs/core/blob/main/CHANGELOG.md
2. 除了数据问题，Message样式在3.2.38也有些问题
   
   

What is expected?

按钮在数据更新后变更样式，但是因为watch中Message的加入，在前几次点击按钮更新数据时，数据更新的很奇怪，多次连续出现true，导致按钮的样式也不能正确变化
如果将watch中的Message.xxx移除，则页面更新正常

Steps to reproduce

1. 创建一个ref<boolean>
2. 写一个按钮样式依赖这个ref<boolean>
   比如<a-button :type="refName ? 'primary' : 'outline'">按钮</a-button>
3. 给按钮一个点击事件，把这个ref的值取反
4. watch这个ref，并在发生变化时调用Message.info/success/...

What is expected?

按钮在数据更新后变更样式，但是因为watch中Message的加入，在前几次点击按钮更新数据时，数据更新的很奇怪，多次连续出现true，导致按钮的样式也不能正确变化
如果将watch中的Message.xxx移除，则页面更新正常

Steps to reproduce

1. 创建一个ref
2. 写一个按钮样式依赖这个ref
   比如按钮
3. 给按钮一个点击事件，把这个ref的值取反
4. watch这个ref，并在发生变化时调用Message.info/success/...

[Sight-wcg]

似乎是 vue 3.2.38 watch 的 bug，pre watcher 触发了两次。更厚的阴影可能是因为两个 message 重叠在一起

vuejs/core#6609

[vaas1993]

我觉得这似乎不是vue的bug，你试试在watch中将原本呼出Message的改成直接alert()，这个问题就消失了，我用ElementPlus也一样遇到这个问题

[tazyong]

我觉得这似乎不是vue的bug，你试试在watch中将原本呼出Message的改成直接alert()，这个问题就消失了，我用ElementPlus也一样遇到这个问题

@vaas1993 这个就是 Vue 的 Bug，Arco 的 Message 组件是用 Vue.render() 实现，无论是 Vue.render() 还是 Vue.createApp() 都会引发这个问题，直接看 代码 就知道了，

[lainbo]

It's Vue issue, sorry for the noice.
vuejs/core#6614