ref 与 reactive 都是创建响应式数据。

ref

主要用于基本类型的响应 接受一个参数值并返回一个响应式且可改变的 ref 对象。ref 对象拥有一个指向内部值的单一属性 .value。

<template>
    <div @click="handleClickAdd">{{count}}</div>
</template>
<script>
    import { ref } from "vue";
    export default {
        setup() {
            const count = ref(0);
            const arr = ref([]);
            const handleClickAdd = () => {
                count.value++;
            };

            return {
                count,
              	handleClickAdd
            };
        },
    };
</script>

reactive

主要用于引用类型的响应。用于为对象添加响应式状态。接收一个js对象作为参数，返回一个具有响应式状态的副本。参数只能传入对象类型

<template>
    <div @click="handleClickAdd('李四')">{{obj.name}}</div>
</template>
<script>
    import { reactive } from "vue";
    export default {
        setup() {
            const obj = reactive ({name: '张三', age: 20})

            const handleClickAdd = (name) => {
                obj.name = name;
                // 以下操作会将响应式取消，不能直接赋值，
                // obj = {name: 345, age: 987}

                // 可以添加新值 同时具备响应式
                obj.title = '456'
            };

            return {
                obj,
                handleClickAdd
            };
        },
    };
</script>