vue3 响应式数据

reactive

// 定义复杂数据类型的响应式

import { reactive } from "vue";

export default {
    setup(){
        let arr = reactive({
            name: 'tyy',
            age: 24,
            heigh: 165
        });
        return { arr };
    }
}

ref

// 定义普通数据类型的响应式，获取/修改数据需要 .value，在模板中不需要 .value 可以直接使用

<template>
    <div>
        <div>姓名：{{ name }}</div>
        <button @click="btnArr">按钮</button>
    </div>
</template>
<script>
import { ref } from "vue";

export default {
    setup(){
        let name = ref('tyy');

        let btnArr = () => {
            name.value = "唐园园";
        };
        return { name, btnArr };
    }
}
</script>

toRef

// 当我们在模板中渲染数据时，不希望用前缀的时候可以使用组合 toRef()
// toRef()是函数，转换响应式对象中某个属性为单独响应式数据，并且值是关联的
<template>
    <div>
        <div>姓名：{{ name }}</div>
        <div>年龄：{{ age }}</div>
        <button @click="btnArr">按钮</button>
        <button @click="btnArr1">按钮1</button>
    </div>
</template>
<script>
import { toRef } from "vue";

export default {
    setup(){
        let arr = reactive({
            name: 'tyy',
            age: 24
        });

        let name = toRef(arr, 'name');
        let age = toRef(arr, 'age');

        let btnArr = () => {
            arr.name = "唐园园";
            arr.age = 23;
        };
        let btnArr1 = ()=>{
            name.value = 'cxx';
            age.value = '58';
        }
        return { name, age, btnArr, btnArr1 };
    }
}
</script>

toRefs

// toRefs 函数可定义转换响应式中所有属性为响应式数据，通常用于结构 reactive 定义的对象，
// 转换响应式对象中所有属性（部分也行）为单独响应式数据，对象成为普通对象，并且值是关联的

<template>
    <div>
        <div>姓名：{{ name }}</div>
        <div>年龄：{{ age }}</div>
        <button @click="btnArr">按钮</button>
        <button @click="btnArr1">按钮1</button>
    </div>
</template>
<script>
import { toRefs } from "vue";

export default {
    setup(){
        let arr = reactive({
            name: 'tyy',
            age: 24
        });
        // 转换
        let { name, age } = toRefs(arr);
        let btnArr = () => {
            arr.name = "唐园园";
            arr.age = 23;
        };
        let btnArr1 = () => {
            name.value = "ree";
            age.value = 29;
        };
        return { name, age, btnArr, btnArr1 };
    }
}
</script>