vue3 - watchEffect监听规则？

Question

这是为什么，应该是独立的嘛，怎么全部的监听器都触发了。
如何修改呢？

---

const attrs = useAttrs();const value = toRef(attrs, 'value');  watchEffect(() => {    const new_value = value.value;    console.log(new_value); })

剥离出来也不行。

Answer 1

你可以使用 watch 单独监听某个响应式的变量啊。具体你可以参考一下 watchEffect 和 watch 的使用区别。https://juejin.cn/post/7134832274364694536

Answer 2

从你给出的问题来看，你似乎在询问Vue.js中的watchEffect函数如何正确使用，以及为何所有的监听器都会被触发。

首先，让我们看一下watchEffect的基本使用。watchEffect是Vue.js 3.0中的一个新功能，它用于在组件内部创建副作用。这个函数会接收一个回调，当组件更新时，这个回调会被执行。

这是watchEffect的基本使用：

import { watchEffect } from 'vue'export default {  setup() {    const count = ref(0)    watchEffect(() => {      console.log(count.value)    })    return { count }  }}

在这个例子中，每当我们改变count的值时，控制台就会打印出新的值。

然后，你提到了一个似乎遇到的问题，即所有的watchEffect都会被触发。但是，从你给出的代码中，我们并不能看到这个问题。你提供的代码只是展示了如何使用watchEffect和useAttrs，而没有展示出多个watchEffect或他们如何被触发。

如果你的问题是关于如何独立地控制每个watchEffect的触发，那么你需要提供更多的上下文信息。每个watchEffect应该独立工作，只有它依赖的数据发生改变时，它才会被触发。如果你的多个watchEffect都依赖于相同的数据，那么当这个数据改变时，他们都会被触发。如果你希望他们能够独立工作，你需要确保他们依赖不同的数据。

如果你的问题是其他的，请提供更多的上下文信息，我会很乐意帮助你。