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.value
 const nValue = n.value
 const msgValue = msg.value
 const countValue =  count.value
})


// 取消监听
const stop = watchEffect(() => {
 const objName = obj.name.value
 const nValue = n.value

 setTimeout(() => {
  stop()
 }, 5000)
})

// 重启监听
const stop = watchEffect(() => {
 const objName = obj.name.value
 const nValue = n.value
})
<script>

对比

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

vue3 watch & watchEffect

一、watch 监听

二、watchEffect 监听

对比

猜你喜欢