vue3的computed属性和watch属性_vue3的watch和computed

1、computed属性

computed属性：由计算得来的属性
在vue3中使用计算属性和监听器的时候，不要忘记要引入，编译器有时候并不会自动导入。

普通用法：

<template>
  <div>
    人民币：{{money}}
    <span><button @click="updateMoney">+1</button></span>
  </div>
  <div>美元：{{newMoney}}</div>

</template>

<script>
import { ref, computed } from 'vue';

export default {
    setup() {
        const money = ref(1);
        //更改money的值
        const updateMoney = () => {
            money.value += 1;
        };
        // Vue3：依赖现有的响应式数据，根据一定的逻辑得到的就是一个新的响应式数据
        //计算美元
        const newMoney = computed(() => {
            // 该函数的返回值就是计算属性的值
            return money.value * 6;
        })
        return {
            money,
            newMoney,
            updateMoney,
        }
    }
}
</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

高级用法：

/*
需求：输入框绑定美元的值，修改输入框的值的时候，人民币也跟着改变
*/
<template>
  <div>
    人民币：{{money}}
    <span><button @click="updateMoney">+1</button></span>
  </div>
  <div>美元：{{newMoney}}</div>
  <input type="text" v-model="newMoney">
</template>

<script>
import { ref, computed } from 'vue';

export default {
    setup() {
        const money = ref(1);
        const updateMoney = () => {
            money.value += 1;
        };
        const newMoney = computed({
            // 访问
            get() {
                return money.value * 6;
            },
              // 修改它的依赖值
            set(val) {
                money.value = val / 6; 
            }
        })
        return {
            money,
            newMoney,
            updateMoney,
        }
    }
}
</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

2、watch监听器

• watch函数用来定义在侦听器；
• 监听ref定义的响应式数据；
• 监听多个响应式数据；
• 监听reactive定义的响应式数据；
• 监听reactive定义的响应式数据的某一个属性。

<template>
  <div>
    count:{{count}}
    <button @click="changeCount">count++</button>
    
    <p>obj.name:{{obj.name}}</p>
    <button @click="changeName">changeName</button>
    
    <p>obj.age{{obj.age}}</p>
    <button @click="changeAge">changeAge</button>
    
    <p>obj.car.name:{{obj.car.name}}</p>
    <button @click="changeCar">changeCar</button>
    
  </div>
</template>

<script>
import { reactive, ref, watch } from 'vue';

export default {
    setup() {
        const count = ref(0);
        const changeCount = () => {
            count.value++;
        };

        // 侦听count  
        // 1、监听ref数据
        watch(count, (newVal, oldVal) => {
            console.log('监听ref数据：' + newVal, oldVal);
        });
        const obj = reactive({
            name: 'zhangsan',
            age: 18,
            car: {
                name:'宝马'
            }
        });

        const changeName = () => {
            obj.name = '我是修改后的name'
        };
        const changeAge = () => {
            obj.age = '我是修改后的age'
        };;

        // 2、监听reactive 对象数据
        watch(obj, () => {
            console.log('监听reactive对象数据变化');
        });

        // 3、同时侦听多个数据的变化
        watch([count, obj], () => {
            console.log('同时侦听多个数据的变化');
        });

        // 4、监听reactive定义的响应式数据的某一个属性
        watch(() => obj.age, () => {
            console.log('obj.age,改变了');
        });

        const changeCar = () => {
            obj.car.name = '奔驰.....'
        }

        watch(() => obj.car, () => {
            console.log('car的数据变化了.......');
        },
        {
            // 5、深度监听
            deep: true,
            // 默认执行，一开始就会执行监听
            immediate:true
        });

        return {
            count,
            changeCount,
            obj,
            changeName,
            changeAge,
            changeCar
        }
    }
}
</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
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87

注意：

 // 2、监听reactive 对象数据
      /**在对象类型中：存放的是地址，当修改的时候地址就改变了，直接这样去监听新旧值，得到的结果都是一样的，就是修改后的值。
         watch(obj, (newVal, oldVal) => {
             console.log('监听reactive对象数据变化....', newVal, oldVal);
        });

       要想监听到对象的新旧值变化，第一个函数写成箭头函数的方式
       函数返回一个副本，就是展开obj的值，放到的新的空间中，和原来的空间不同了，就能够监听到新旧值了
        */
        watch(() => ({ ...obj }), (newVal, oldVal) => {
            console.log('监听reactive 对象的变化....',newVal,oldVal);
        });
1
2
3
4
5
6
7
8
9
10
11
12