项目地址 gitee.com/fe521/vue3-…

响应式对象

reactive 和 toRefs

在computed中使用需要添加.value 比如`age.value`

如果我们定义的属性很多，那么我们setup的 return也会很长

那么vue提供了 reactive 允许我们定义一个响应式对象

我们使用的值都放到对象内，当做对象使用

---

toRefs 把响应式的对象变为普通对象的引入不需要 data.age而是直接 age使用

reactive 使用方法

<template>
    <div>{{ data.age }}</div>
</template>
<script>
import {reactive} from 'vue';
export default {
    name: 'Home',
    components: {},
    setup() {
        const data = reactive({
            name: 'hello',
            age: 18,
            year: computed({
                get() {
                    return 2020 - data.age;
                },
                set(val) {
                    data.age = 2020 - val;
                }
            })
        });
        return {
            data
        };
    }
};
</script>

reactive 配合 toRefs 使用

<template>
    <div class="home">
        <p>
            年龄：
            <button type="button" @click="changeAge(-1)">-</button>
            {{ age }}
            <button type="button" @click="changeAge(1)">+</button>
        </p>
        <p>
            出生年份：
            <button type="button" @click="changeYear(-1)">-</button>
            {{ year }}
            <button type="button" @click="changeYear(1)">+</button>
        </p>
    </div>
</template>

<script>
import {computed, ref, reactive, toRefs} from 'vue';
export default {
    name: 'Home',
    components: {},
    setup() {
        const data = reactive({
            name: 'hello',
            age: 18,
            year: computed({
                get() {
                    return 2020 - data.age;
                },
                set(val) {
                    data.age = 2020 - val;
                }
            })
        });
        // const age = ref(19);

        function changeAge(value) {
            data.age += value;
        }
        // function changeAge(value) {
        //     age.value += value;
        // }
        // const year = computed(() => {
        //     return 2020 - age.value;
        // });
        // const year = computed({
        //     get() {
        //         return 2020 - age.value;
        //     },
        //     set(val) {
        //         age.value = 2020 - val;
        //     }
        // });

        function changeYear(value) {
            // year.value = year.value + value;
            data.year = data.year + value;
        }

        return {
            // data,
            ...toRefs(data),
            // year,
            // age,
            changeYear,
            changeAge
        };
    }
};
</script>