Vue3响应式对象：ref与reactive对比

1.reactive生成响应式对象

<template> <div> <p>学生信息：</p> 学生名称：{{ studentName.name }} 学生年龄：{{ studentName.age }} 学生成绩：{{ studentName.fenshu }} </div> <button @click="addFenshu">点击增加分数</button> </template> <script setup lang="ts" name="Home"> import { reactive } from 'vue'; const studentName = reactive({ name: '张三', age: 18, fenshu: 90 }) function addFenshu() { studentName.fenshu += 10 } console.log(studentName) </script> <style scoped></style>

reactive方法生成的对象会返回一个proxy响应式对象。

总结：ref：用来定义 基本数据类型 和 复杂数据类型 的响应式数据。

reactive：用来定义 复杂数据类型 的响应式数据。

区别 ：ref：创建的变量必须用 .value来更改数据。

例（a.value==“XXX”或a.value[0].name="XXX")。

reactive：重新分配对象（比如重新赋值），会失去响应式（可以用object.assgin方法解决）。

使用原则：

1. 若需要一个基本类型的响应式数据必须用ref方法。
2. 若需要一个对象类型的响应式数据且层级不深ref或rective都可以（如果通过ref.value方法也可以解决reactive重新赋值后数据不是响应式问题）。
3. 若需要一个对象类型的响应式数据且层级较深，推荐使用reactive。