广州市南沙区基本建设办公室网站,短网址生成器有哪些,自己做网站有名,网站安全维护包括什么在Vue 3中#xff0c;reactive和ref都是用于响应式数据的API。它们的主要区别在于使用方式和返回值类型。
reactive#xff1a;
reactive函数用于将一个对象转换为响应式对象。它接收一个普通的JavaScript对象#xff0c;并返回一个被代理的响应式对象。这意味着当响应式对…在Vue 3中reactive和ref都是用于响应式数据的API。它们的主要区别在于使用方式和返回值类型。
reactive
reactive函数用于将一个对象转换为响应式对象。它接收一个普通的JavaScript对象并返回一个被代理的响应式对象。这意味着当响应式对象的属性发生更改时Vue会自动检测到并重新渲染相关的组件。
import { reactive } from vue;const state reactive({count: 0,
});console.log(state.count); // 0
state.count 5;
console.log(state.count); // 5在上面的例子中reactive函数将一个普通的对象state转换为响应式对象。我们可以直接访问响应式对象的属性通过修改属性的值Vue会自动更新相关的视图。
ref
ref函数用于将一个值转换为响应式对象。它接收一个普通的JavaScript值并返回一个包装的响应式对象其值可以通过.value进行访问和修改。
import { ref } from vue;const count ref(0);
console.log(count.value); // 0
count.value 5;
console.log(count.value); // 5在上面的例子中ref函数将一个数字0转换为响应式对象。我们可以通过.value来访问和修改响应式对象的值。
需要注意的是在模板中使用ref时Vue会自动解包你可以直接在模板中使用ref对象无需通过.value属性访问其值。
总结 使用reactive可以创建一个响应式的对象访问和修改属性时不需要特殊处理。 使用ref可以创建一个响应式的包装对象访问和修改值时需要使用.value属性。 通常情况下如果你需要创建一个包装的响应式对象用于存储单个值可以使用ref。 如果你需要创建一个包含多个属性的响应式对象可以使用reactive。 reactive() 的局限性
reactive() API 有两条限制
仅对对象类型有效对象、数组和 Map、Set 这样的集合类型而对 string、number 和 boolean 这样的 原始类型无效。
因为 Vue的响应式系统是通过属性访问进行追踪的因此我们必须始终保持对该响应式对象的相同引用。这意味着我们不可以随意地“替换”一个响应式对象因为这将导致对初始引用的响应性连接丢失
reactive对比ref
从定义数据角度对比 ref用来定义 基本数据类型 reactive用来定义 对象或数组类型数据 备注 ref也可以用来定义对象或数组类型数据它内部会自动通过reactive转为代理对象从原理角度对比 ref通过Object.defineProperty()的get和set来实现响应式数据劫持 reactive通过Proxy来实现响应式数据劫持并通过Reflect操作源对象内部的数据 从使用角度对比 ref定义数据操作数据需要 .value ,读取数据时模板中直接读取不需要 .value reactive 定义的数据 操作数据和读取数据均不需要 .value
