定义:

1. ref用来定义：基本类型数据、对象类型数据；

2. reactive用来定义：对象类型数据。

使用原则: 

1. 若需要一个基本类型的响应式数据，必须使用ref。

2. 若需要一个响应式对象，层级不深，ref、reactive都可以。

3. 若需要一个响应式对象，且层级较深，推荐使用reactive。reactive 则适用于复杂对象或数组的响应式数据。

访问方式不同

1. ref：使用 .value 属性来访问和修改值。
2. reactive：可以直接访问和修改对象或数组的属性或元素，而无需使用 .value。

响应式数据： 

1. ref创建的变量必须使用.value（可以使用Vue - Official插件自动添加.value）。

   敲代码时需要等一秒左右才弹出

   
   name.value相当于拿到地址    name只是拿到值

2. reactive重新分配一个新对象，会失去响应式（可以使用Object.assign去整体替换）。
   let a=reactive（xxx）
a=reactive（bbb）此时a不是响应式数据，a地址被改变了
   在第一行代码中，a 变量指向了 xxx 的响应式对象。
   在第二行代码中，a 被重新赋值为 bbb 的响应式对象，此时 a 的地址（指向的内存位置）发生了改变。
    

更详细内容看下面:

一、ref 创建：基本类型的响应式数据

• 作用：定义响应式变量。

• 语法：let xxx = ref(初始值)。

• 返回值：一个RefImpl的实例对象，简称ref对象或ref，ref对象的value属性是响应式的。

• 注意点：

  • JS(script)中操作数据需要：xxx.value，但模板(template)中不需要.value，直接使用即可。

  • 对于let name = ref('张三')来说，name不是响应式的，name.value是响应式的。

  • name.value相当于拿到地址    name只是拿到值

• 示例代码

<template><div class="person"><h2>姓名：{{name}}</h2><h2>年龄：{{age}}</h2><button @click="changeName">修改名字</button><button @click="changeAge">年龄+1</button><button @click="showTel">点我查看联系方式</button></div>
</template><script setup lang="ts" name="Person">import {ref} from 'vue'// name和age是一个RefImpl的实例对象，简称ref对象，它们的value属性是响应式的。let name = ref('张三')let age = ref(18)// tel就是一个普通的字符串，不是响应式的let tel = '13888888888'function changeName(){// JS中操作ref对象时候需要.valuename.value = '李四'console.log(name.value)// 注意：name不是响应式的，name.value是响应式的，所以如下代码并不会引起页面的更新。// name = ref('zhang-san')}function changeAge(){// JS中操作ref对象时候需要.valueage.value += 1 console.log(age.value)}function showTel(){alert(tel)}
</script>

二、ref 创建：对象类型的响应式数据

• 其实ref接收的数据可以是：基本类型、对象类型。

• 若ref接收的是对象类型，内部其实也是调用了reactive函数。

示例代码 

<template><div class="person"><h2>汽车信息：一台{{ car.brand }}汽车，价值{{ car.price }}万</h2><h2>游戏列表：</h2><ul><li v-for="g in games" :key="g.id">{{ g.name }}</li></ul><h2>测试：{{obj.a.b.c.d}}</h2><button @click="changeCarPrice">修改汽车价格</button><button @click="changeFirstGame">修改第一游戏</button><button @click="test">测试</button></div>
</template><script lang="ts" setup name="Person">
import { ref } from 'vue'// 数据
let car = ref({ brand: '奔驰', price: 100 })
let games = ref([{ id: 'ahsgdyfa01', name: '英雄联盟' },{ id: 'ahsgdyfa02', name: '王者荣耀' },{ id: 'ahsgdyfa03', name: '原神' }
])
let obj = ref({a:{b:{c:{d:666}}}
})console.log(car)function changeCarPrice() {car.value.price += 10
}
function changeFirstGame() {games.value[0].name = '流星蝴蝶剑'
}
function test(){obj.value.a.b.c.d = 999
}
</script>

 三、reactive 创建：对象类型的响应式数据

只能用于响应式对象，reactive定义的响应式数据是“深层次”的。值不需要.value

<script lang="ts" setup name="Person">
import { reactive } from 'vue'// 数据
let car = reactive({ brand: '奔驰', price: 100 })
let games = reactive([{ id: 'ahsgdyfa01', name: '英雄联盟' },{ id: 'ahsgdyfa02', name: '王者荣耀' },{ id: 'ahsgdyfa03', name: '原神' }
])
let obj = reactive({a:{b:{c:{d:666}}}
})function changeCarPrice() {car.price += 10
}
function changeFirstGame() {games[0].name = '流星蝴蝶剑'
}
function test(){obj.a.b.c.d = 999
}
</script>