vue3监听器watch以及watchEffect的使用

一，watch()简介：

侦听一个或多个响应式数据源，并在数据源变化时调用所给的回调函数 watch()默认是懒侦听的，即仅在侦听源发生变化时才执行回调函数。
watch()一共有三个参数
第一个参数：侦听器的源，可以为以下几种 ：
以函数形式返回一个值 ；一个ref； 一个reactive响应式对象或者由以上类型的值组成的数组 。
第二个参数：侦听源发生变化时调用的回调函数。这个函数接受三个参数
分别是新值，旧值 ，用于注册副作用清理的回调函数（可选，可忽略） ；当侦听多个来源时，回调函数接受两个数组，分别对应来源数组中的新值和旧值。

第三个参数（可选）：配置对象，支持以下这些选项

immediate：在侦听器创建是立即触发回调，第一次调用时旧值是undefined，值为 true 时，一旦运行就会立即执行，值为false时，保持惰性。
deep：值为 true 时，可以监听对象所有属性，值为 false 时保持更加具体特性，必须指定到具体的属性上。
flush 回调的触发时机：
1，sync：同步模式下执行
2，pre：在数据变化之前执行回调函数
3，post：在数据变化之后执行回调函数，但是需要等待所有依赖项都更新后才执行
once: 每当被侦听源发生变化时，侦听器的回调就会执行。如果希望回调只在源变化时触发一次，请使用 once: true 选项。

1，监听ref基本类型

<template><div ><div>{{ msg }}</div><button @click="btnclick">改变数据</button></div>
</template>
<script setup lang='ts'>import {  ref, watch } from 'vue';const msg = ref<string>('pink')watch(msg,(newValue,oldValue)=>{console.log('newValue',newValue);   // coderkeyconsole.log('oldValue',oldValue);   //  pink}) const btnclick = () => {msg.value= 'coderkey'} 
</script>

2，监听reactive响应式对象

<template><div ><div>{{ obj }}</div><button @click="btnclick">改变数据</button></div>
</template>
<script setup lang='ts'>import { computed, reactive, ref,watch } from 'vue';let obj = reactive<any>({name: 'pink',age: 18})// 此处作用避免打印newValue和oldValue都是最新的值，因为引用同一块地址let deepObj = computed(()=>{return JSON.parse(JSON.stringify(obj))})watch(deepObj,(newValue,oldValue)=>{console.log('newValue',newValue);   // {name: 'coderkey', age: 18}console.log('oldValue',oldValue);  // {name: 'pink', age: 18}})const btnclick = () => {obj.name = 'coderkey'}
</script>

3，监听对象属性（函数形式返回）

<template><div ><div>{{ obj.name }}</div><button @click="btnclick">改变数据</button></div>
</template>
<script setup lang='ts'>
import { computed, reactive, ref,watch } from 'vue';let obj = reactive<any>({name: 'pink',age: 18})watch(()=>obj.name,(newValue,oldValue)=>{console.log('newValue',newValue);   // coderkeyconsole.log('oldValue',oldValue);   //  pink},/* {immediate: true, // 立即调用 deep:false // 开启深度监听} */) const btnclick = () => {obj.name = 'coderkey'} </script>

4，监听多个数据（以上类型任意组合，以数组形式）

<template><div ><div>{{ msg }}</div><div>{{ obj.age }}</div><button @click="btnclick">改变数据</button></div>
</template>
<script setup lang='ts'>
import { computed,  reactive, ref,watch } from 'vue';
const msg = ref<string>('pink')
let obj = reactive<any>({name: 'pink',age: 18})watch([msg,()=> obj.age],(newValue,oldValue)=>{console.log('newValue',newValue);   // ['coderkey', 25]console.log('oldValue',oldValue);  // ['pink', 18]})const btnclick = () => {msg.value= 'coderkey'obj.age = 25} 
</script>

5，监听数组

<template><div ><div>{{ arr}}</div><button @click="btnclick">改变数据</button></div>
</template>
<script setup lang='ts'>
import { computed, reactive, ref, watch } from 'vue';let arr = reactive<Array<string>>(['pink'])let deepArr = computed(()=>{return JSON.parse(JSON.stringify(arr))})watch(deepArr,(newValue,oldValue)=>{console.log('newValue',newValue);  // ['pink', 'coderkey']console.log('oldValue',oldValue); // ['pink']})const btnclick = () => {arr[1] = 'coderkey'}
</script>

6，监听路由

<script setup lang='ts'>
import { watch } from 'vue';
import { useRouter} from 'vue-router'
const router = useRouter()
// 监听当前路由信息
watch(() => router.currentRoute.value,(newValue: any, oldValue: any) => {console.log('newValue',newValue)},{ immediate: true }  // 立即执行
)
</script>

---

二，watchEffect ：

watchEffect函数来创建高级侦听器。它不需要指定依赖项，自动追踪响应式状态的变化，并在变化时重新运行。一旦运行就会立即执行，使用时不需要具体指定监听的谁，回调函数内直接使用。只能访问当前最新的值，访问不到修改之前的值。

<template><div ><div>{{ obj.name }}</div><button @click="btnclick">改变数据</button></div>
</template>
<script setup lang='ts'>
import {  reactive, watch, watchEffect } from 'vue';
let obj = reactive<any>({name: 'pink',age: 18})watchEffect(()=>{console.log(obj.name); // 初次运行输出pink 而后点击按钮 监听到数据变化输出coderkey})const btnclick = () => {obj.name = 'coderkey'} 
</script>

---