Vue3-ref、reactive函数的watch

Vue3-ref、reactive函数的watch

ref函数的watch

• 原理：监视某个属性的变化。当被监视的属性一旦发生改变时，执行某段代码。
• watch 属性中的数据需要具有响应式
• watch 属性可以使用箭头函数
• watch 属性可以监视一个或者多个响应式数据，并且可以配置 immediate(立即执行) 和 deep(深度侦听)搭配使用

// 监视一个响应式数据
watch(监视的数据, (newValue, oldValue) => { ... }, {immediate : true, deep : true})

// 监视多个响应式数据
// 第一种 有多少个监视数据就写多少个watch
watch(监视的数据1, (newValue, oldValue) => { ... }, {immediate : true, deep : true})
watch(监视的数据2, (newValue, oldValue) => { ... }, {immediate : true, deep : true})

// 第二种 数组形式
watch([监视的数据1, 监视的数据2], (newValue, oldValue) => { ... }, {immediate : true, deep : true})
1
2
3
4
5
6
7
8
9
10

// App.vue
<template>
    <h2>计数器1：{{counter1}}</h2>
    <h2>计数器2：{{counter2}}</h2>
    <button @click="counter1++">计数器1加1</button><br>
    <button @click="counter2++">计数器2加1</button>
</template>

<script>
    import { watch, ref } from 'vue'
    export default {
        namme : 'App',
        setup(){
            let counter1 = ref(1)
            let counter2 = ref(100)

            watch(counter1, (newValue, oldValue) => {
                console.log('计数器1', newValue, oldValue);
            })

            watch(counter2, (newValue, oldValue) => {
                console.log('计数器2', newValue, oldValue);
            })

            // 采用数组的方式，一次性监视多个属性
            watch([counter1, counter2], (newValue, oldValue) => {
                console.log(newValue, oldValue);
            })
            
            return {counter, counter2}
        }
    }
</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

reactive函数的watch

• reactive函数在 watch 属性中的注意事项：
  • 当watch中的侦听数据是reactive函数的一个对象时：
    • 在watch中是无法获取到oldValue的，只能获取到newValue。
    • 在没使用箭头函数的基础上，watch 属性默认开启deep(深度侦听)的，并且deep无法被取消，即便是在watch 属性的末尾加上 {deep : false} 也没有用。
    • 使用箭头函数调用对象，虽然无法获取oldValue，但是deep设置有效
  • 当watch中的侦听数据是reactive函数的是基本数据类型时：
    • 在watch中侦听基本数据类型，需要使用箭头函数
    • 使用箭头函数调用基本数据类型，才能获取到oldValue
• watch 属性可以监视一个或者多个响应式数据

// 监视一个对象
// 不使用箭头函数，deep设置无效，oldValue获取不到
watch(对象, (newValue, oldValue) => { ... }, {immediate : true})

// 使用箭头函数，oldValue获取不到，deep设置有效
watch(() => 对象, (newValue, oldValue) => { ... }, {immediate : true, deep : false})

// 监视一个基本数据类型 使用箭头函数，获取到oldValue
watch(() => 基本数据类型, (newValue, oldValue) => { ... })

// 监视多个 数组形式，使用箭头函数，获取到oldValue
watch([() => 基本数据类型, () => 基本数据类型], (newValue, oldValue) => { ... })
1
2
3
4
5
6
7
8
9
10
11
12

// App.vue
<template>
    <h2>计数器1：{{data.counter1}}</h2>
    <h2>计数器2：{{data.a.counter2}}</h2>
    <button @click="data.counter1++">计数器1加1</button><br>
    <button @click="data.a.counter2++">计数器2加1</button>
</template>

<script>
    import { reactive, watch } from 'vue'
    export default {
        name : 'App',
        setup(){
            let data = reactive({
                counter1 : 1,
                a : {
                    counter2 : 100
                }
            })

            // data是一整个对象，oldValue是拿不到的，默认开启deep（deep设置无效）
            watch(data, (newValue, oldValue) => {
                console.log(newValue, oldValue);
            }, {deep : false})

            // data.counter1是一个基本数据类型，可以获取到oldValue
            watch(() => data.counter1, (newValue, oldValue) => {
                console.log(newValue, oldValue);
            })

            // data.a是一个对象，deep设置有效，oldValue无法获取
            watch(() => data.a, (newValue, oldValue) => {
                console.log(newValue, oldValue);
            }, {deep : false})

            // data.a.counter2是基本数据类型，可以获取oldValue
            watch(() => data.a.counter2, (newValue, oldValue) => {
                console.log(newValue, oldValue);
            })

            // data.counter1 和 data.a.counter2是基本数据类型，数组形式，可以获取oldValue
            watch([() => data.counter1, () => data.a.counter2], (newValue, oldValue) => {
                console.log(newValue, oldValue);
            })

            return {data}
        }
    }
</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