【Vue3】Vue3中监视watch和watchEffect使用（图文+代码）

前言：watch结构三部分：

1、监视变量名，

2、监视回调值（新值newValue和旧值oldValue）

 3、监视参数

参数解读：

1、immediate:true：监听的这个对象是否会【立始输出】，也就是监听没开启动作时，就先输入初始值。

2、deep：true  是否深度监视，也就是针对对象或数组内的值监视。

一、监视ref所定义的一个响应式数据

 

<template>
  <h2>当前求和为：{{ sum }}</h2>
  <button @click="sum++">点我sum++</button>
</template>

<script>
import {ref, watch} from 'vue'

export default {
  name: 'Demo',
  setup() {
    let sum = ref(0);
    let msg = ref("你好啊");
    //情况一：监视ref所定义的一个响应式数据
    watch(sum, (newValue, oldValue) => {
      console.log("sum发生了变化", newValue, oldValue);
    })

    return {
      sum
    }
  }
}
</script>

1、immediate:true：监听的这个对象是否会【立始输出】，也就是监听没开启动作时，就先输入初始值。

2、deep：true  是否深度监视，也就是针对对象或数组内的值监视。

二、多个变量同时监视时

 

<template>
  <h2>当前求和为：{{ sum }}</h2>
  <button @click="sum++">点我sum++</button>
  <hr/>
  <h2>信息为：{{ msg }}</h2>
  <button @click="msg+='!'">点我sum++</button>
</template>

<script>
import {ref, watch} from 'vue'

export default {
  name: 'Demo',
  setup() {
    let sum = ref(0);
    let msg = ref("你好啊");

    //情况二：监视ref所定义的多个响应式数据
    watch([sum,msg],(newValue, oldValue) => {
      console.log("sum发生了变化", newValue, oldValue);
    })

    return {
      sum,
      msg
    }
  }
}
</script>

三、监视reactive所定义的一个响应式数据的整个数组对象变化

 

<template>

  <h2>姓名：{{ person.name }}</h2>
  <h2>年龄：{{ person.age }}</h2>
  <h2>薪资：{{ person.job.j1.salary }}K</h2>
  <button @click="person.name+='~'">修改姓名</button>
  <button @click="person.age++">修改年龄</button>
  <button @click="person.job.j1.salary++">涨薪</button>

</template>

<script>
import {reactive, watch} from 'vue'

export default {
  name: 'Demo',
  setup() {
    let person = reactive({
      name: "张三",
      age: 18,
      job:{
        j1:{
          salary:20
        }
      }
    })
    //情况三：监视reactive所定义的一个响应式数据全部属性
    // 1\注意：无法正确获取oldvalue
    // 2\注意：强制开启了深度监视（deep配置无效）
    watch(person, (newValue, oldValue) => {
      console.log("person发生了变化", newValue, oldValue);
    })

    return {
      person
    }
  }
}
</script>

注意：无法正确获取oldvalue

四、监视reactive所定义的一个响应式数据某个属性（对象数组的某个值）

 

<template>

  <h2>姓名：{{ person.name }}</h2>
  <h2>年龄：{{ person.age }}</h2>
  <h2>薪资：{{ person.job.j1.salary }}K</h2>
  <button @click="person.name+='~'">修改姓名</button>
  <button @click="person.age++">修改年龄</button>
  <button @click="person.job.j1.salary++">涨薪</button>

</template>

<script>
import {reactive, watch} from 'vue'

export default {
  name: 'Demo',
  setup() {
    let person = reactive({
      name: "张三",
      age: 18,
      job:{
        j1:{
          salary:20
        }
      }
    })
   
    watch(()=>person.name, (newValue, oldValue) => {
      console.log("person发生了变化", newValue, oldValue);
    })

    return {
      person
    }
  }
}
</script>

五、监视reactive所定义的一个响应式数据某个属性（对象数组中的子对象数组的变化）

增加deep:true参数

 

 

<template>

  <h2>姓名：{{ person.name }}</h2>
  <h2>年龄：{{ person.age }}</h2>
  <h2>薪资：{{ person.job.j1.salary }}K</h2>
  <button @click="person.name+='~'">修改姓名</button>
  <button @click="person.age++">修改年龄</button>
  <button @click="person.job.j1.salary++">涨薪</button>

</template>

<script>
import {reactive, watch} from 'vue'

export default {
  name: 'Demo',
  setup() {
    let person = reactive({
      name: "张三",
      age: 18,
      job:{
        j1:{
          salary:20
        }
      }
    })
    watch(()=>person.job, (newValue, oldValue) => {
      console.log("job发生了变化", newValue, oldValue);
    },{deep:true})

    return {
      person
    }
  }
}
</script>

六、watchEffect使用

watch：提前指定具体变量元素，同时需要写返回值。
watchEffect：不提前指定具体元素，不需要返回值，有点像computed。

如下例：

const xl = person.age，变量指向person.age，person.age改变时，就是被监视

 

 

<template>

  <h2>姓名：{{ person.name }}</h2>
  <h2>年龄：{{ person.age }}</h2>
  <h2>薪资：{{ person.job.j1.salary }}K</h2>
  <button @click="person.name += '~'">修改姓名</button>
  <button @click="person.age++">修改年龄</button>
  <button @click="person.job.j1.salary++">涨薪</button>

</template>

<script>
import { reactive, watchEffect } from 'vue'

export default {
  name: 'Demo',
  setup() {
    let person = reactive({
      name: "张三",
      age: 18,
      job: {
        j1: {
          salary: 20
        }
      }
    })
    //watchEffect所指定的回调中用到的数据只要发生变化,则直接重新执行回调
    watchEffect(() => {
      const xl = person.age
      console.log("watchEffect配置的回调执行了")
    })
  return {
    person
  }
}
}
</script>

最后，感谢：“上归谷”的张老师