vue3中的watch和watchEffect差异和使用 vue3中的watch和watchEffect差异和使

有四种类型的监听函数：watch / watchEffect / watchPostEffect / watchSyncEffect。
监听系统两个派别

可以分为两类 watch和watchEffect

watch

watch(监听对象, (旧状态, 新状态) => { ... })

指定要监听的基本类型、数组等，但必须根据类型更改编写代码。
下一个状态，上一个状态，将传递要监听的值更改前后的值。
下面介绍如何描述受监听数据类型的差异。
(1) 基本类型 ref

const num = ref(0) watch(num, (next, prev) => { console.log(next, prev); })

(2) 数组

const arr = ref([]) watch(() => [...arr.value], (next, prev) => { console.log(next, prev); })

(3) 对象

const state = reactive({count : 0, age: 0}) watch(() => ({...state}), (next, prev) => { console.log(next, prev); })

监听数组可以一起传递多个元素，以监听多个元素。但是，有一个注意事项。
如果数组中传递的任何元素发生更改，则watch将触发，但如果==同时更改，则只触发一次==。

//同时更改 const onClick = () => { ++num1.value ++num2.value }// 触发一次 watch([num1, num2], (next, prev) => { ... })

【vue3中的watch和watchEffect差异和使用】在这种情况下，只需使用async await即可触发2次

const onClick = async () => { ++num1.value await nextTick() ++num2.value }watch([num1, num2], (next, prev) => { ... })

监听嵌套对象（deep：true）

const state = reactive({ age: 0, type: { hoge: 0 } })watch(() => state, (next, prev) => { ... }, {deep: true})

组件创建时立即执行（immidiate：true） immidiate: true如果为 true，则在创建组件时也会执行监听函数。
watchEffect
监听立即执行传入的一个函数，同时响应式追踪其依赖，并在其依赖变更时重新运行该函数。

const count = ref(0)watchEffect(() => console.log(count.value)) // -> logs 0setTimeout(() => { count.value++ // -> logs 1 }, 100)

停止监听当watchEffect在组件的setup() 函数或生命周期钩子被调用时，侦听器会被链接到该组件的生命周期，并在组件卸载时自动停止。
在一些情况下，也可以显式调用返回值以停止侦听：

const stop = watchEffect(() => { /* ... */ })// later stop()

清除副作用

当我们组件卸载的时候, 清空监听函数或者定时器需要onInvalidate

watchEffect(onInvalidate => { const token = performAsyncOperation(id.value) onInvalidate(() => { // id has changed or watcher is stopped. // invalidate previously pending async operation token.cancel() }) })

之所以是通过传入一个函数去注册失效回调，而不是从回调返回它，是因为返回值对于异步错误处理很重要。
在执行数据请求时，副作用函数往往是一个异步函数：

const data = https://www.it610.com/article/ref(null) watchEffect(async onInvalidate => { onInvalidate(() => { /* ... */ }) // 我们在Promise解析之前注册清除函数 data.value = https://www.it610.com/article/await fetchData(props.id) })

副作用刷新时机默认情况下，会在所有的组件 update 前执行：

watchEffect 0 onInvalidate 1 watchEffect 1 onUpdated

watchPostEffect 和 watchSyncEffect 有3种类型：1预(watchEffect)、2 同步(watchSyncEffect)和 3 后(watchPostEffect)。
watchPostEffect 和 watchSyncEffect是watchEffect的第二个参数的==刷新属性==。

watchEffect(() => { // },{ flush: "sync" //or "post" or "pre" })

我们将详细介绍每个执行时间。
① pre(watchEffect) 这是默认值。在组件更新之前异步调用。
也就是说，在生命周期中，它在onBeforeUpdate之前调用
② sync(watchSyncEffect) 在组件更新之前或更新之前，立即同步调用它。
但是，不建议同步调用监视效果，因为它效率低下。
通常，它在onBeforeUpdate之前调用。
③ post(watchPostEffect) 在组件更新后调用。前更新更新到更新的计时。
顺序