【Vue3】watch监听使用【超详细】

作者：我家小花儿 | 2024-05-03 12:33:49

踩

文章目录

情况一:监听ref定义的基本类型数据
情况二:监听ref定义的对象类型数据
情况三:监听reactive定义的对象类型数据
情况四:监听ref或reactive定义的对象类型数据中某个属性
情况五:监听上述多个数据

#watch使用结构
watch(被监视的数据,监视的回调,配置对象(deep,immediate等...))

let xxx = ref("1111") 或者 reactive({a:1,b:2})
watch(xxx,(newVal,oldVal)=>{

},{ 
deep:true,immediate:true
})
1
2
3
4
5
6
7
8
9

vue3中watch只能监听的以下四种数据:

一个getter函数(一个能返回值的函数)
ref定义的值
reactive定义的值
包含以上内容的数组`

情况一:监听ref定义的基本类型数据

watch监听ref简单的基本类型数据

代码展示

<template>
    <div class="itemStyle">
          <div>
              姓名: <input type="text" v-model="name">
          </div>
    </div>
</template>

<script setup lang="ts" name="item">
    import {ref,reactive,toRefs,toRef,watch} from "vue"
    let name = ref("小张")

    watch(name,(newVal,oldVal)=>{
        console.log("新值:",newVal);
        console.log("旧值:",oldVal);
    })
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

解除监听案例

<template>
    <div class="itemStyle">
          <div>
            当前数量: <span>{{num}}</span>
        </div>
        <div>
            <button @click="handleAdd">添加数量</button>
        </div>
    </div>
</template>

<script setup lang="ts" name="item">
    import {ref,reactive,toRefs,toRef,watch} from "vue"
    let num = ref(1)

    const handleAdd = ()=>{
        num.value++
    }

    let stopWatch = watch(num,(newVal,oldVal)=>{
        console.log("我监听了");
        if(newVal>5){
            stopWatch()
        }
    })
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

情况二:监听ref定义的对象类型数据

watch监听ref简单的对象地址值,若想监视对象内部属性的变化，需要手动开启深度监视

代码展示

<template>
    <div class="itemStyle">
          <div>
              姓名: <input type="text" v-model="data.name">
          </div>
          <div>
              年龄: <input type="text" v-model="data.age">
          </div>
          <div>
              爱好: <input type="text" v-model="data.hobby">
          </div>
        <div>
            <button type="button" @click="handleChangeData">修改数据</button>
        </div>
    </div>
</template>

<script setup lang="ts" name="item">
    import {ref,reactive,toRefs,toRef,watch} from "vue"

    let data = ref({
        name:"小张",
        age:18,
        hobby:"打篮球"
    })

    const handleChangeData = ()=>{
        data.value = {
            name:"小红",
            age:20,
            hobby:"打乒乓球"
        }
    }

    watch(data,(newVal,oldVal)=>{
        console.log("新值:",newVal);
        console.log("旧值:",oldVal);
    },{
        deep:true,//开启深度监听
    })

</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

情况三:监听reactive定义的对象类型数据

特别注意:如果监听reactive定的数据，默认开始深度监听的，不能关闭

代码展示

<template>
    <div class="itemStyle">
          <div>
              姓名: <input type="text" v-model="data.name">
          </div>
          <div>
              年龄: <input type="text" v-model="data.age">
          </div>
          <div>
              爱好: <input type="text" v-model="data.hobby">
          </div>
          <div>
              其他: <input type="text" v-model="data.other.c.d">
          </div>
        <div>
            <button type="button" @click="handleChangeOtherData">修改其他</button>
        </div>
        <div>
            <button type="button" @click="handleChangeData">修改数据</button>
        </div>
    </div>
</template>

<script setup lang="ts" name="item">
    import {ref,reactive,toRefs,toRef,watch} from "vue"

    let data = reactive({
        name:"小张",
        age:18,
        hobby:"打篮球",
        other:{
            a:"1111",
            b:"2222",
            c:{
                d:"1111",
                e:"2222",
            }
        }
    })

    const handleChangeData = ()=>{
        Object.assign(data,{
            name:"小红",
            age:20,
            hobby:"打乒乓球"
        })
    }

    const handleChangeOtherData = ()=>{
        data.other.c.d="更多内容"
    }

    watch(data,(newVal,oldVal)=>{
        console.log("新值:",newVal);
        console.log("旧值:",oldVal);
    })

</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59

情况四:监听ref或reactive定义的对象类型数据中某个属性

特别注意:

若该属性值不是【对象类型】，需要写成函数形式
若该属性值是依然是【对象类型】，可直接写，也可以写成函数，建议写成函数。

结论:监视的要是对象里的属性，那么最好写函数式。
注意点:若是对象监视的是地址值，需要关注对象内部，需要手动开启深度监视。

代码展示

<template>
    <div class="itemStyle">
          <div>
              姓名: <input type="text" v-model="data.name">
          </div>
          <div>
              年龄: <input type="text" v-model="data.age">
          </div>
          <div>
              奥吉阿婆: <input type="text" v-model="data.hobby">
          </div>
          <div>
              其他: <input type="text" v-model="data.other.c.d">
          </div>
        <div>
            <button type="button" @click="handleChangeOtherData">修改其他</button>
        </div>
    </div>
</template>

<script setup lang="ts" name="item">
    import {ref,reactive,toRefs,toRef,watch} from "vue"

    let data = reactive({
        name:"小张",
        age:18,
        hobby:"打篮球",
        other:{
            a:"1111",
            b:"2222",
            c:{
                d:"1111",
                e:"2222",
            }
        }
    })

    const handleChangeOtherData = ()=>{
        data.other.c.d="更多内容"
    }

	//监视响应式对象中的某个属性，且该属性是基本类型的，要写成函数
	watch(()=>data.name,(newVal,oldVal)=>{
        console.log("新值:",newVal);
        console.log("旧值:",oldVal);
    })
	
	//监视响应式对象中的某个属性，且该属性是对象类型的，可以直接写，也能写函数，更推荐写函数
    watch(()=>data.other.c,(newVal,oldVal)=>{
        console.log("新值:",newVal);
        console.log("旧值:",oldVal);
    },{deep:true})

</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54

情况五:监听上述多个数据

代码展示

<template>
    <div class="itemStyle">
          <div>
              姓名: <input type="text" v-model="data.name">
          </div>
          <div>
              年龄: <input type="text" v-model="data.age">
          </div>
          <div>
              爱好: <input type="text" v-model="data.hobby">
          </div>
          <div>
              其他: <input type="text" v-model="data.other.c.d">
          </div>
        <div>
            <button type="button" @click="handleChangeOtherData">修改其他</button>
        </div>
    </div>
</template>

<script setup lang="ts" name="item">
    import {ref,reactive,toRefs,toRef,watch} from "vue"

    let data = reactive({
        name:"小张",
        age:18,
        hobby:"打篮球",
        other:{
            a:"1111",
            b:"2222",
            c:{
                d:"1111",
                e:"2222",
            }
        }
    })

    const handleChangeOtherData = ()=>{
        data.other.c.d="更多内容"
    }
	//监视，情况五:监视上述的多个数据
    watch([data.other.c,()=>data.name,()=>data.age,()=>data.hobby],(newVal,oldVal)=>{
        console.log("新值:",newVal);
        console.log("旧值:",oldVal);
    },{deep:true})

</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48

✨ $\textcolor{gray}{踩坑不易，还希望各位大佬支持一下}$

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/我家小花儿/article/detail/529622