【vue3】watch与watchEffect的全面用法（一篇就会）

watch

• watch可以监听一个或多个响应式数据，一旦数据变化，就自动执行监听回调。
• 如果是监听reactive对象中的属性，必须通过函数来指定。
• 如果监听多个数据，需要使用数组来指定。
• 默认初始时不执行回调，但可以通过配置immediate为true，来指定初始时立即执行第一次，通过配置deep为true，来指定深度监听。

watch监听ref

watch可以监听一个或多个响应式数据，一旦数据变化，就自动执行监听回调。

<template>
  <div>
    {{ name }},<button @click="setName">修改姓名</button>
  </div>
</template>
<script setup lang="ts">
import { ref, watch } from 'vue'
let name = ref("张三")
let setName = () => {
  name.value = "李四";
}
watch(name, (newVal, oldVal) => { console.log(newVal, oldVal) })
</script>

watch监听reactive

如果是监听reactive对象中的属性，必须通过函数来指定。

<template>
  <div>
    {{ area.province }},{{ area.city }} <button @click="setArea">修改省市</button>
  </div>
</template>
<script setup lang="ts">
import { reactive, watch } from 'vue'
//监听reactive
let area = reactive({
  province:"山西",
  city:"太原"
})
const setArea = () => {
  area.province = "河北";
  area.city = "唐山";
}
watch(()=>area.province,(newVal,oldVal)=>{
  console.log(newVal,oldVal)
})
</script>

watch监听多个数据

如果监听多个数据，需要使用数组来指定。（主要区别在watch监听的数据上）

<template>
  <div>
    {{ area.province }},{{ area.city }} <button @click="setArea">修改省市</button>
  </div>
</template>
<script setup lang="ts">
import { reactive, watch } from 'vue'
//监听reactive
let area = reactive({
  province:"山西",
  city:"太原"
})
const setArea = () => {
  area.province = "河北";
  area.city = "唐山";
}
watch([()=>area.province,()=>area.city],(newVal,oldVal)=>{
  console.log(newVal[0],newVal[1],oldVal[0],oldVal[1]);
})
</script>

watch配置immediate和deep

默认初始时不执行回调，但可以通过配置immediate为true，来指定初始时立即执行第一次，通过配置deep为true，来指定深度监听。

<template>
  <div>
    {{ area.province }},{{ area.city }} <button @click="setArea">修改省市</button>
  </div>
</template>
<script setup lang="ts">
import { reactive, watch } from 'vue'
//监听reactive
let area = reactive({
  province:"山西",
  city:"太原"
})
const setArea = () => {
  area.province = "河北";
  area.city = "唐山";
}
watch([()=>area.province,()=>area.city],(newVal,oldVal)=>{
  console.log(newVal[0],newVal[1],oldVal[0],oldVal[1]);
},{
  immediate:true, //初始化执行一次
  deep:true //深度监听
})
</script>

没有点击按钮时，显示undefined

点击按钮后

watchEffect

watchEffect可以不用直接指定要监听的数据，回调函数中使用的哪些响应式数据就监听哪些响应式数据，默认初始时就会执行一次。

<template>
  <div>
    {{ area.province }},{{ area.city }} <button @click="setArea">修改省市</button>
  </div>
</template>
<script setup lang="ts">
import { reactive, watchEffect } from 'vue'
//监听reactive
let area = reactive({
  province:"山西",
  city:"太原"
})
const setArea = () => {
  area.province = "河北";
  area.city = "唐山";
}


watchEffect(() => {
  console.log(area.province);
})
</script>