vue3中Watch和WatchEffect的用法和区别

目录

Ⅰ.Watch

1.基本用法和三个参数的解析

(1).参数1：需要监听的数据源

(2).参数2：当监听数据发生变化时需要执行的回调函数

(3).参数3：配置选项

深层监听器(多种形式)：

关于watch的返回值问题：

Ⅱ .WatchEffect

1.基本用法和两个参数的解析

Ⅲ.watch vs watchEffect

---

Ⅰ.Watch

1.基本用法和三个参数的解析

当我们需要在数据变化时执行一些“副作用”/监听数据变化时：如更改 DOM、执行异步操作等，就可以使用 watch 函数。

watch(参数1,参数2,参数3) 一共可以有三个参数，分别是：需要监听的数据源、需要执行的回调函数、watch的配置选项。

(1).参数1：需要监听的数据源

watch()的第一个参数可以是不同形式(即不同类型)的“数据源”，它可以是：

• 一个 ref 响应式数据
• 一个计算属性
• 一个 (getter) 函数（有返回值的函数）
• 一个 reactive 响应式数据对象
• 以上类型的值组成的数组 / 多个相同类型数据组成的数组

const x = ref(1)
const y = ref(2)
const doubleX = computed(() => x.value * 2)
const obj = reactive({ count: 0 })// 监听一个 ref 数据
watch(x, (newValue) => {console.log(`x is ${newValue}`)
})// 监听计算属性doubleX
watch(doubleX, (newValue) => {console.log(`doubleX is ${newValue}`)
})// 监听一个 (getter) 函数
watch(() => x.value + y.value,(sum) => {console.log(`sum of x + y is: ${sum}`)}
)// 监听一个 reactive 类型的数据(响应式对象obj)
watch(obj, (newValue, oldValue) => {// 在嵌套的属性变更时触发// 注意：`newValue` 此处和 `oldValue` 是相等的// 因为它们是同一个对象！
})// 监听由以上多个数据类型的值组成的数组
watch([x, () => y.value], ([newX, newY]) => {console.log(`x is ${newX} and y is ${newY}`)
})

注意，你不能直接侦听响应式对象的属性值，例如:

const obj = reactive({ count: 0 })// 错误，因为 watch() 此时得到的参数是一个 number
watch(obj.count, (count) => {console.log(`count is: ${count}`)
})

这里需要用一个返回该属性的 (getter) 函数：

watch(() => obj.count, // 提供一个 getter 函数返回要监听的这个属性值(count) => {console.log(`count is: ${count}`)}
)

(2).参数2：当监听数据发生变化时需要执行的回调函数

watch()的第二个参数是数据发生变化时执行的回调函数。

这个回调函数也接受三个参数：新值(newValue)、旧值(oldValue)，以及一个用于清理副作用的回调函数(onCleanup)。onCleanup()回调函数会在副作用下一次执行前调用，可以用来清除无效的副作用，如等待中的异步请求。

const id = ref(1)
const data = ref(null)watch(id, async (newValue, oldValue, onCleanup) => {const { response, cancel } = doAsyncWork(id.value)// `cancel` 会在 `id` 更改时调用// 以便取消之前未完成的请求onCleanup(cancel)data.value = await response.json()
})

(3).参数3：配置选项

watch()的第三个参数是一个可选的对象{...}，可以添加以下一个/多个选项：

• immediate：在侦听器创建时立即触发回调。
  因为 watch() 函数是懒执行的：即当数据源发生变化时，才会执行回调。但在某些场景中，我们希望在创建侦听器时，立即执行一遍回调。所以我们可以使用 immediate 选项来实现立即监听。
• deep：深度遍历，以便在深层级变更时触发回调。
• flush：回调函数的触发时机，它有以下三个值：
  pre：默认，dom 更新前调用
  post：dom 更新后调用
  sync：同步调用
• onTrack / onTrigger：用于调试的钩子。在依赖收集和回调函数触发时被调用。

watch(() => obj.someObject,(newValue, oldValue) => {// `newValue` 此处和 `oldValue` 是相等的，除非 obj.someObject 被整个替换了console.log('deep', newValue.count, oldValue.count)},{  deep: true,    //开启深度监听immediate: true    //开启立即监听(第一次就监听)//flush: 'post'    //如果想要在回调函数里面获取更新后的DOM，就可以添加这一项}
)obj.someObject.count++ //打印结果： 'deep' 1 1

深层监听器(多种形式)：

直接给 watch() 传入一个响应式对象(即监听的数据源)，会默认创建一个深层侦听器：所有嵌套的属性变更时都会被触发：

const obj = reactive({ count: 0 })watch(obj, (newValue, oldValue) => {// 在嵌套的属性变更时触发// 注意：`newValue` 此处和 `oldValue` 是相等的// 因为它们是同一个对象！
})obj.count++

 相比之下，如果监听的是一个返回响应式对象的 getter 函数，只有在对象被替换时才会触发：

const obj = reactive({someString: 'hello',someObject: { count: 0 }
})watch(() => obj.someObject,() => {// 仅当 obj.someObject 被替换时才会触发这个回调函数}
)

我们也可以自己手动显式地加上 deep 选项，强制将watch()变为深层监听器(即深度监听)：

watch(() => obj.someObject,(newValue, oldValue) => {// `newValue` 此处和 `oldValue` 是相等的，除非 obj.someObject 被整个替换了console.log('deep', newValue.count, oldValue.count)},{ deep: true }
)obj.someObject.count++ // 打印 'deep' 1 1

但是，深层监听一个响应式对象或数组，新值和旧值是相等的。为了解决这个问题，我们可以对值进行深拷贝。

watch(//对监听的值进行深拷贝，确保你安装了lodash() => _.cloneDeep(obj.someObject),(newValue, oldValue) => {// 此时 `newValue` 此处和 `oldValue` 是不相等的console.log('deep', newValue.count, oldValue.count)},{ deep: true }
)obj.someObject.count++ //打印 'deep' 1 0

注意：深层侦听需要遍历所有嵌套的属性，当数据结构庞大时，开销很大。所以我们要谨慎使用，并且留意性能。

关于watch的返回值问题：

watch 的返回值是一个用来停止该副作用的函数，我们需要用一个变量接收监听器函数的返回值，其实就是返回的一个函数，然后我们调用该函数，即可关闭当前监听器。示例如下：

const unwatch = watch(() => {})// ...当该侦听器不再需要时
unwatch()

注意：使用同步语句创建的侦听器，会自动绑定到宿主组件实例上，并且会在宿主组件卸载时自动停止。使用异步回调创建一个侦听器，则不会绑定到当前组件上，我们必须手动停止它，以防内存泄漏。示例如下：

<script setup>
import { watchEffect } from 'vue'// 同步创建，组件卸载会自动停止
watchEffect(() => {})// 异步创建，组件卸载不会停止，需要手动停止
setTimeout(() => {watchEffect(() => {})
}, 100)
</script>

Ⅱ .WatchEffect

1.基本用法和两个参数的解析

watchEffect 相比于 watch 会立即监听(创建监听器时就监听)并执行一遍回调函数，如果这时函数产生了副作用，Vue 会自动追踪副作用的依赖关系，自动分析出侦听数据源。
watchEffect 接受两个参数：

第一个参数是数据发生变化时执行的回调函数，用法和 watch 一样。

第二个参数是一个可选的对象，支持 flush 和 onTrack / onTrigger 选项，功能和 watch 相同。

注意：watchEffect 仅会在其同步执行期间，才追踪依赖。使用异步回调时，只有在第一个 await 之前访问到的依赖才会被追踪。

 假设有一个watch监听代码如下：

const url = ref('https://...')
const data = ref(null)async function fetchData() {const response = await fetch(url.value)data.value = await response.json()
}// 立即执行一次，再侦听 url 变化
watch(url, fetchData, { immediate: true })

 那我们就可以用watchEffect监听改写如以下代码：

const url = ref('https://...')
const data = ref(null)// 一个参数就可以搞定
watchEffect(async () => {const response = await fetch(url.value)data.value = await response.json()
})

Ⅲ.watch vs watchEffect

watch 和 watchEffect 的主要功能是相同的，都能响应式地执行回调函数。它们的区别是追踪响应式依赖的方式不同：

• watch 只追踪明确定义的数据源，不会追踪在回调中访问到的东西；默认情况下，只有在数据源发生改变时才会触发回调；watch 可以访问侦听数据的新值和旧值。
• watchEffect会初始化执行一次，在副作用发生期间追踪依赖，自动分析出侦听数据源；watchEffect 无法访问侦听数据的新值和旧值。

简单一句话，watch 功能更加强大，而 watchEffect 在某些场景下更加简洁。