watch

watch可以监听的值

可以是响应式ref或者计算属性、响应式对象、getter函数、多个数据源组合成的数组

vue2中的watch和vue3中的watch的区别

vue2中methods中可以通过this.属性名访问vue3中setup中的数据，watch也可以监听Vue3中的数据变化 vue3中watch默认开启深度监听

监听单个数据

语法

从vue中引入，且在setup中作为函数调用

ts
import {watch} from "vue";

setup{
    
    ...
    watch("要监听的数据",(更改之后的值，更改之前的值)=>{})
    ...
}

监听多个数据

语法

若需要监听多个数据，多个数据发生变化后都执行同一个事件。则watch第一个参数可以传入数组，用于监听多个数据发生变化此时回调事件中新值和旧值都是数组类型

ts
import {watch} from "vue";

setup{
    
    ...
    watch(["要监听的数据1","要监听的数据2"],(更改之后的值，更改之前的值)=>{})
    ...
}

监听对象

注意点

默认开启深度监听，对于引用类型，内存地址指向是不变的。所以watch监听的新值和旧值是一样的；

特点

监听整个对象，无法获取到旧值
若必须需要新值和旧值，则watch第一个参数必须为函数，函数返回值为需要监听的对象中的某个值（只检测此属性）;若需要监测多个，则采用数组写法，内部写多个函数，函数返回值为需要监测的对象的某个属性

注意点

若需要监听对象中的某个对象的属性，则此时深度监听不到，需要手动开始深度监听，watch添加第三个参数{deep:true}

Eg

ts
watch(()=>people.hobby,(n,o)=>{
  console.log("people变化了",n,o)
},{deep:true})

watch内的函数立即执行与深度监听

开启watch内的函数立即执行

watch中第三个参数作为配置项除了传入deep:true开启深度监听，还可以添加immediate:true实现watch内的函数立即执行

Eg


watch(()=>people.hobby,(n,o)=>{
  console.log("people变化了",n,o)
},{deep:true,immediate:true})

回调的时机

说明

都在vue组件更新之前被调用（即：在回调中访问的DOM都是vue更新之前的状态）,若需要在回调中访问更新后的DOM可以采用flush:'post'选项指定

ts
watch(source, callback, {
  flush: 'post'
})

watchEffect(callback, {
  flush: 'post'
})

对于watchEffect可以采用flush:'post'或者直接采用watchPostEffect

ts
import { watchPostEffect } from 'vue';
watchPostEffect(() => { /* 在 Vue 更新后执行 */ })

watchEffect

区别

和watch的区别

watchEffect默认立即执行，并且追踪器依赖
watch需要指明监听的数据源，而watchEffect不需要指定数据源，方法中用到了什么就监听什么

和computed的区别

computed注重值，必须返回一个值；而watchEffect注重过程，不需要写返回值

类比React的useEffect

同样都是组件挂载后和更新后触发 watchEffect自动追踪依赖，而useEffect需要手动指定

注意点

watchEffect默认不能直接监听对象，不是深度监听
watchEffect仅会在其同步执行期间，才追踪依赖。在使用异步回调时，只有在第一个await正常工作前访问到的属性才会被追踪
watchEffect追踪依赖的数据需要为响应式数据，不然不会执行

EG

vue
<template>
    <h1 @click="changeProple">{{people}}</h1>
</template>

<script>
import {reactive,watchEffect} from "vue";

export default {
  name: 'HelloWorld',

  setup(){

    let people = reactive({
      name:"xm",
      hobby:{
        gender:0,
        food:"chicken",
        love:{
          gender:0,
          age:18
        }
      }
    })
    function changeProple(){
      people.hobby.love.age = 24
    }


    watchEffect(()=>{
      console.log("watchEffect",people.hobby.love.age)
    })

    return {
      people,
      changeProple,
    }
  },
  
}
</script>

<style scoped>
</style>

目录