一篇搞懂vue3中如何使用ref、reactive实现响应式数据

ref 可实现 基本类型、对象类型响应式数据

reactive：只能实现 对象类型响应式

ref实现 基本类型 数据响应式： 

<template><div class="person"><h2>姓名：{{ name }}</h2><h2>年龄：{{ age }}</h2><button @click="changeName">修改名字</button><button @click="changeAge">修改年龄</button><button @click="showTel">查看联系方式</button></div>
</template><script lang="ts" setup name="person234">
import { ref } from 'vue' //想让哪个数据是响应式的，就用ref包裹// 定义数据//ref()是一个函数，用来包裹数据，让数据变成响应式的let name = ref('张三')let age = ref(25)let tel = '123-456-7890'console.log(name)// 定义方法function changeName() {name.value = '李四'console.log(name)}function changeAge() {age.value = 30        //使用 .value 才能改变ref包裹的数据（包裹之后就变成对象了）}function showTel() {alert(tel)console.log(tel)}
</script><style scoped>
.person {background-color: rgb(25, 120, 109);box-shadow: 0 0 10px;border-radius: 10px;padding: 20px;}
button {margin: 10px;
}
</style>

ref() 包裹之后，name就变成了一个对象 ，修改数据要通过 .value

 ref处理 对象数据 响应式：

<template><div class="person"><h2>一辆{{ car.brand }}车，价值{{ car.price }}w</h2><button @click="changePrice">修改汽车价格</button><hr><h2>喜欢的游戏:</h2><ul><li v-for="g in games" :key="g.id">{{ g.name }}</li></ul><button @click="changeFirstgame">修改第一个游戏</button></div>
</template><script lang="ts" setup name="Person">
import { ref } from 'vue'let car = ref({ brand: '奔驰', price: 100 })let games = ref([{id: 1, name: '王者荣耀'},{id: 2, name: '英雄联盟'},{id: 3, name: '绝地求生'}])// 定义方法function changePrice() {car.value.price += 10     //ref响应式只有.value才能变成响应式console.log(car)}function changeFirstgame() {  //ref响应式只有.value才能变成响应式games.value[0].name = '植物大战僵尸'}</script><style scoped>
.person {background-color: rgb(25, 120, 109);box-shadow: 0 0 10px;border-radius: 10px;padding: 20px;}
button {margin: 10px;
}
li {font-size: 20px;
}
</style>

reactive实现对象类型响应式数据：

<template><div class="person"><h2>一辆{{ car.brand }}车，价值{{ car.price }}w</h2><button @click="changePrice">修改汽车价格</button><hr><h2>喜欢的游戏:</h2><ul><li v-for="g in games" :key="g.id">{{ g.name }}</li></ul><button @click="changeFirstgame">修改第一个游戏</button><hr><button @click="changeC">修改c的值:{{ obj.a.b.c }}</button></div>
</template><script lang="ts" setup name="Person">import { reactive } from 'vue'// 定义数据//reactive()是一个函数，用来包裹对象数据，让其变成响应式的let car1 = {brand: '宝马', price: 200 }let car = reactive({ brand: '奔驰', price: 100 })console.log(car1)console.log(car)let games = reactive([{id: 1, name: '王者荣耀'},{id: 2, name: '英雄联盟'},{id: 3, name: '绝地求生'}])//不管c的值有多深的嵌套，只要是reactive包裹的，都是响应式的let obj = reactive({a: {b: {c: 10}}})// 定义方法function changePrice() {car.price += 10}function changeFirstgame() {games[0].name = '植物大战僵尸'}function changeC() {obj.a.b.c = 100}
</script><style scoped>
.person {background-color: rgb(25, 120, 109);box-shadow: 0 0 10px;border-radius: 10px;padding: 20px;}
button {margin: 10px;
}
li {font-size: 20px;
}
</style>

 ​​​

 

ref 和 reactive之间的区别：

 ref 用于定义基本类型数据、对象类型数据。

ref 创建的变量必须使用 .value （可以使用VueOfficial插件 启用dot value来优化）

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

reactive重新分配一个新对象，会失去响应式（可以使用car.value、Object.assign去整体替换）。

<script lang="ts" setup name="Person">
import { ref } from 'vue'let car = ref({ brand: '奔驰', price: 100 })
let sum = ref(0)// 定义方法
function changePrice() {car.value.price += 10
}
function changeBrand() {car.value.brand = '宝马'
}
function changeCar() {// 这样写不行，因为car是一个ref对象，不能直接赋值// car = { brand: '保时捷', price: 1000 } // 直接替换对象// car.value = { brand: '保时捷', price: 1000 } // 合并对象属性Object.assign(car.value, { brand: '保时捷', price: 1000 }) 
}function changeSum() {sum.value += 1
}
</script>

• 使用原则：

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

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

3. 若需要一个响应式对象，且层级较深，推荐使用reactive。