vue3 watch watchEffect

watch & watchEffect 函数都是监听器, 用于监视数据的变化; watch 有惰性，watchEffect 无惰性；watch 需要指定具体的监视属性，watchEffect 不需要指定具体的监视属性和配置参数，会自动感知代码依赖；watch 能获取到以前的旧值和新值，watchEffect 只能拿到最新值

一、watch 监听

1、watch 监视 ref 所定义的单个响应式数据

<script setup>
import { watch, computed } from 'vue'
const num = ref(11)watch(// 监视的数据：监视 ref 所定义的单个响应式数据num,// 监视回调函数(newVal, oldVal) => {console.log(newVal, oldVal)},// 监视配置：immediate 的默认值是 false，当值为 true 表示立即执行； deep 表示是否深度监听，这里的 deep 无意义{ immediate: true, deep: true }
)
<script>

2、watch 监视 computed 计算属性

<script setup>
import { watch, computed } from 'vue'
const start = ref(1)
const end = computed(() => start.value + 1)watch(// 监视的数据：监视 computed 计算属性end,// 监视回调函数(newVal, oldVal) => {console.log(newVal, oldVal)},// 监视配置：immediate 的默认值是 false，当值为 true 表示立即执行； deep 表示是否深度监听，这里的 deep 无意义{ immediate: true, deep: true }
)
<script>

3、watch 监视 getter 函数

<script setup>
import { watch, computed } from 'vue'
const messages = ref('this is a mesage')watch(// 监视的数据：监视 getter 函数() => '返回的消息' + messages.value,// 监视回调函数(newVal, oldVal) => {console.log(newVal, oldVal)},// 监视配置：immediate 的默认值是 false，当值为 true 表示立即执行； deep 表示是否深度监听，这里的 deep 无意义{ immediate: true, deep: true }
)
<script>

4、watch 监视由 ref、computed、getter函数 等任意类型组成的数组

<script setup>
import { watch, computed } from 'vue'
const msg = ref('this is a msg')
const n = ref(1)
const count = computed(() => n.value + 1)watch(// 监视的数据：监视由 ref、computed、getter函数 等任意类型组成的数组[msg, n, count, () => n.value + count.value],// 监视的回调函数(newVal, oldVal) => {console.log(newVal, oldVal)},// 监视配置：immediate 的默认值是 false，当值为 true 表示立即执行； deep 表示是否深度监听，这里的 deep 无意义{ immediate: true, deep: true }
)
<script>

5、watch 监视 reactive 所定义的响应式对象, deep 深度监听默认强制开启，即使监听设置 deep:false 也无效；回调里很难正确的获得 oldValue, 回调的 newVal 和 oldVal 是相同的

<script setup>
import { watch, reactive } from 'vue'
const obj = reactive({name: 'bob',age: 18
})watch(// 监视的数据：监视 reactive 所定义的响应式对象obj,// 监视的回调函数： newVal 和 oldVal 是相同的(newVal, oldVal) => {console.log(newVal, oldVal)},// 监视配置：immediate 的默认值是 false，当值为 true 表示立即执行； deep 表示是否深度监听，这里的 deep 强制开启，即使手动设置 false 也无效{ immediate: true, deep: false }
)
<script>

6、watch 监视 reactive 所定义的响应式对象的某个属性

<script setup>
import { watch, reactive } from 'vue'
const obj = reactive({name: 'bob',age: 18,sex: '男',score: 90,info: {meta: 'meta'}
})watch(// 监视的数据：监视 reactive 所定义的响应式对象属性 name, 注意这里要用 getter 函数的形式书写，如果直接写 obj.name 则无效() => obj.name,// 监视的回调函数(newVal, oldVal) => {console.log(newVal, oldVal)}
)watch(// 监视的数据：监视 reactive 所定义的响应式对象属性 age, 注意这里要用 getter 函数的形式书写，如果直接写 obj.age 则无效 () => obj.age,// 监视的回调函数(newVal, oldVal) => {console.log(newVal, oldVal)}
)watch(// 监视的数据：监视 reactive 所定义的响应式对象多个属性[() => obj.sex, () => obj.score],// 监视的回调函数(newVal, oldVal) => {console.log(newVal, oldVal)}
)watch(// 监视的数据：监视 reactive 所定义的响应式对象属性 info, 注意这里要用 getter 函数的形式书写，如果直接写 obj.info 则无效 () => obj.info,// 监视的回调函数(newVal, oldVal) => {console.log(newVal, oldVal)},// 监视配置：immediate 的默认值是 false，当值为 true 表示立即执行； deep 表示是否深度监听，这里的 deep 需要开启，因为 obj.info 是一个对象，如果不开启无法深度监听{ immediate: true, deep: true }
)
<script>

7、watch 停止监听 & 重启监听

<script setup lang="ts">
import { watch, reactive } from 'vue'
const visible = ref<boolean>(false)let stopWatch = watch(visible,(newVal, oldVal) => {console.log(newVal, oldVal)},{ immediate: true, deep: true }
)
// 停止监听: 将 watch 赋值给一个变量，当达到条件时就调用这个变量来停止监听
setTimeout(() => {stopWatch()
}, 3000)// 重启监听： 将监听器重新赋值给变量
stopWatch = watch(visible,(newVal, oldVal) => {console.log(newVal, oldVal)},{ immediate: true, deep: true }
)
<script>

二、watchEffect 监听

<script setup>
import { watchEffect, computed, ref,reactive } from 'vue'
const obj = reactive({ name: 'bob',  age: 18 })
const n = ref(1)
const msg = () => n.value + 1
const count = computed(() => n.value + 1)// 只要 watchEffect 中涉及到数据发生变化，就会执行此回调
watchEffect(() => {const objName = obj.name.valueconst nValue = n.valueconst msgValue = msg.valueconst countValue =  count.value
})// 取消监听
const stop = watchEffect(() => {const objName = obj.name.valueconst nValue = n.valuesetTimeout(() => {stop()}, 5000)
})// 重启监听
const stop = watchEffect(() => {const objName = obj.name.valueconst nValue = n.value
})
<script>

对比

对比	是否有惰性	参数	获得值
watch	有惰性，数值再次改变后执行监听函数	可以侦听多个数据的变化versions	参数可以拿到当前值和原始
watchEffect	立即执行没有惰性	不需要传递侦听内容，自动感知代码依赖	不需要传递到很多参数，不能获取原始值