ref和reactive是Vue3的 composition API中2个最重要的响应式API。通常情况下，ref用来处理基本类型数据, reactive用来处理对象(递归深度响应式)。但是其实ref也可以用来定义对象类型的响应数据。

• 如果用ref定义对象/数组, 内部会自动将对象/数组转换为reactive的代理对象。
• ref内部: 通过给value属性添加getter/setter来实现对数据的劫持。
• reactive内部: 通过使用Proxy来实现对对象内部所有数据的劫持, 并通过Reflect操作对象内部数据。
• ref的数据操作: 在js中要.value, 在模板中不需要(内部解析模板时会自动添加.value)

实例：

<template>
    <h1>reactive与ref细节问题</h1>
    <hr>
    <div>str: {{str}}</div>
    <div>p1: {{p1}}</div>
    <div>p2: {{p2}}</div>
    <hr>
    <button @click="update">更新</button>
</template>

<script lang="ts">
    import {defineComponent, ref, reactive} from 'vue';
    export default defineComponent({
        name: 'App',
        setup() {
            const str = ref('hello')
            const p1 = reactive({name: 'zhangsan', age: 20, car: {brand: 'BMW'}})

            // 使用ref处理对象  ==> 对象会被自动reactive为proxy对象
            const p2 = ref({name: 'lisi', age: 24, car: {brand: 'BENZ'}})
            console.log(str);
            console.log(p1);
            console.log(p2);
            console.log(p2.value.car) // 也是一个proxy对象

            function update() {
                str.value += ' vue3 ';
                p1.age += 1
                p2.value.age += 1;

                p2.value.car.brand = 'TOYOTA' // reactive对对象进行了深度数据劫持
                console.log(p2.value.car)
            }
            return {
                str,
                p1,
                p2,
                update
            }
        }
    });
</script>