Vue3监听器利用

watch(监听的对象或值,
回调函数（参数新值，旧值）,
设置项是对象={
  immediate: true//立即监听--进入就会实行一次
deep：true //深度监听
})

起首引入

1. import { ref, watch } from 'vue';

复制代码

设置相应式数据

1. const num = ref(1)

复制代码

设置点击变乱，点击触发修改num

1. const btn = () => {
2.   // 改变简单数据
3.   num.value++
4. }

复制代码

监听简朴数据范例----- immediate: true//立即监听--进入就会实行一次

1. // 简单数据类型监听
2. watch(num, (newVal, oldVal) => {
3.   console.log(newVal, oldVal);
4. }, {
5.   immediate: true//立即监听--进入就会执行一次
6. })

复制代码

---------------------------------------------------------------------------------------------------------------------------------
设置复杂数据范例

1. const obj = ref({ age: 18 })

复制代码

点击变乱添加修改复杂数据

1. const btn = () => {
2.   // 改变简单数据
3.   num.value++
4.   // 改变复杂数据
5.   obj.value.age++
6. }

复制代码

设置监听--监听整个对象需要开启深度监听----- deep: true,//开启深度监听

1. // 监听整个对象
2. watch(obj, (newVal, oldVal) => {
3.   console.log(oldVal);//无效--复杂数据类型监听没有旧值参数
4.   console.log(newVal, 'fz');
5. }, {
6.   deep: true,//开启深度监听
7.   immediate: true//立即监听
8. })

复制代码

=========================================================================
监听复杂数据范例的某一个属性值
设置复杂数据

1. const obj2 = ref({ num: 0, max: 99, min: 0 })

复制代码

点击变乱，修改对象内的属性值

1. const btn = () => {
2.   // 改变简单数据
3.   num.value++
4.   // 改变复杂数据
5.   obj.value.age++
6.   //----
7.   obj2.value.num++
8. }

复制代码

监听obj对象内的num属性值的变化-----不需要开启深度监听，但是想页面加载就实行需要设置immediate，可以监听到新值和旧值

1. // 监听复杂对象的某一个值，不需要开启深度监听
2. watch(() => obj2.value.num, (newVal, oldVal) => {
3.   console.log(newVal, oldVal, 'hs');
4. })

复制代码

*************************************************************************************************************
相应式数据

1. const num = ref(1)
2. // ***************
3. // 复杂数据类型
4. const obj = ref({ age: 18 })

复制代码

同时监听多个值---不要开启深度监听可以，监听obj内数据的变化

1. // 监听多个值（简单数据和复杂数据）--监听参数是数组形式
2. watch([num, obj], (newVal, oldVal) => {
3.   console.log(newVal, oldVal, 'zzz');
4. })

复制代码

来源：https://blog.csdn.net/qq_20623665/article/details/129772867
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！