vue3如何数据监听watchwatchEffect

watch和watchEffect是Vue3中常用的数据监听方法。它们可以监视一个Vue实例上的数据变化，并在数据变化时执行一些操作，可以用来观察数据的变化，并在数据发生变化时做一些响应处理，例如更新UI组件、发送请求等。下面将介绍watch和watchEffect的使用方法。 ## watch 在Vue3中，使用`watch`来监听数据变化，需要传递两个参数：要监视的数据和回调函数。第一个参数可以是字符串、数组，或一个可响应的对象（例如ref或reactive返回的对象），第二个参数是一个函数，它会在监视的数据变化时被调用。

以上代码中，我们使用`watch`监视了输入框的值，并在输入框的值发生变化时，更新了result的值。 ## watchEffect `watch`方法适用于需要监听指定数据的变化，而`watchEffect`适用于需要监听所有响应式数据的变化。`watchEffect`的参数也是一个回调函数，它会在初始化时执行一次，然后在其所依赖的响应式数据发生变化时再执行一次。它返回一个停止函数，当调用停止函数时，就可以停止监听。

以上代码中，我们使用`watchEffect`监听了输入框的值，并在输入框的值发生变化时，更新了result的值。 ## watch和watchEffect的区别 * `watch`是针对某个具体的响应式数据的监听，而`watchEffect`是监听所有响应式数据的变化。 * `watchEffect`在初始化时会立即执行一次，而`watch`则需要明确指定要监听的数据和回调函数。 * `watchEffect`会自动追踪其所依赖的响应式数据，如果这些数据发生变化，就会再次执行它，而`watch`则需要手动指定要监听哪些数据。 * `watch`的回调函数可以接收两个参数：新值和旧值，而`watchEffect`的回调函数没有这个参数。 ## 总结 Vue3中的`watch`和`watchEffect`是非常实用的数据监听方法，可以用来监听响应式数据的变化，并在数据变化时做出一些响应处理。`watch`适用于需要监听具体的响应式数据的变化，而`watchEffect`则适用于监听所有响应式数据的变化，并且会自动追踪其依赖的数据。通过使用这两个方法，可以更灵活地控制响应式数据的变化，并对数据变化做出及时的响应。