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

1.reactive生成响应式对象template div p学生信息/p 学生名称{{ studentName.name }} 学生年龄{{ studentName.age }} 学生成绩{{ studentName.fenshu }} /div button clickaddFenshu点击增加分数/button /template script setup langts nameHome import { reactive } from vue; const studentName reactive({ name: 张三, age: 18, fenshu: 90 }) function addFenshu() { studentName.fenshu 10 } console.log(studentName) /script style scoped/stylereactive方法生成的对象会返回一个proxy响应式对象。总结ref用来定义 基本数据类型 和 复杂数据类型 的响应式数据。reactive用来定义 复杂数据类型 的响应式数据。区别 ref创建的变量必须用 .value来更改数据。例a.value“XXX”或a.value[0].nameXXX)。reactive重新分配对象比如重新赋值会失去响应式可以用object.assgin方法解决。使用原则若需要一个基本类型的响应式数据必须用ref方法。若需要一个对象类型的响应式数据且层级不深ref或rective都可以如果通过ref.value方法也可以解决reactive重新赋值后数据不是响应式问题。若需要一个对象类型的响应式数据且层级较深推荐使用reactive。