企业官网建设流程全解析

影院网站建设,百度应用宝,昌平县城做网站,手机网站宽度是多少Vue3提供了多种创建响应式数据的方式#xff0c;主要包括reactive()#xff08;返回代理对象#xff0c;适用于复杂数据结构#xff09;ref()#xff08;返回Ref对象#xff0c;包装原始值#xff09;computed()#xff08;返回计算属性Ref#xff09;不同类型具有不同…Vue3提供了多种创建响应式数据的方式主要包括reactive()返回代理对象适用于复杂数据结构ref()返回Ref对象包装原始值computed()返回计算属性Ref不同类型具有不同的响应式特点reactive实现深度响应ref需要.value访问computed具有惰性求值特性。此外还有readonly、shallow系列等变体分别适用于只读、浅层响应等场景。类型判断可使用isRef/isReactive工具函数。开发者应根据具体需求处理原始值/对象、性能优化、只读需求等选择合适的响应式API。Vue 3 响应式系统类型关系总结类别核心API返回类型响应性特点适用场景注意事项响应式对象reactive()T(代理对象)深度响应式嵌套属性自动响应对象、数组、Set、Map等复杂数据结构1. 仅适用于对象类型2. 不能用于原始值3. 解构会丢失响应性响应式原始值ref()RefT包装原始值为响应式对象通过.value访问原始值string、number、boolean等、对象引用1. 需通过.value访问/修改值2. 模板中自动解包计算属性computed()ComputedRefT惰性求值缓存结果依赖变化时重新计算派生状态、复杂计算逻辑1. 避免副作用2. 结果只读除非提供setter只读响应式readonly()ReadonlyT创建只读代理防止意外修改传递响应式对象但不允许修改的场景1. 嵌套属性也是只读的2. 深层只读浅层响应式shallowRef()ShallowRefT仅.value本身响应式嵌套对象不处理大型对象或与第三方库集成1. 替换整个.value会触发响应2. 修改嵌套属性不会浅层响应式对象shallowReactive()T仅根级别属性响应式嵌套对象保持原样性能敏感场景明确知道哪些属性需要响应仅跟踪根级别属性的访问/修改浅层只读shallowReadonly()ReadonlyT根级别只读嵌套对象可修改需要部分保护的情况允许修改深层嵌套属性响应式转换toRef()RefT为响应式对象的属性创建单独ref提取props的属性保持响应性保持与源属性的响应式连接响应式转换(多个)toRefs(){ [K in keyof T]: RefT[K] }将响应式对象转为普通对象属性均为ref解构reactive对象时保持响应性便于解构而不丢失响应性原始值转换toRaw()T返回reactive或readonly的原始对象需要操作非代理对象时如第三方库绕过响应式系统修改不会触发更新标记响应式markRaw()T标记对象永不转换为响应式第三方类实例、大型不可变数据Vue会跳过对该对象的代理类型关系图text原始数据 ├── reactive() → 响应式代理 (深度) │ ├── readonly() → 只读代理 │ └── toRefs() → 解构用ref集合 ├── ref() → Ref对象 (包装值) │ ├── shallowRef() → 浅层Ref │ └── computed() → 计算Ref ├── shallowReactive() → 浅层代理 │ └── shallowReadonly() → 浅层只读代理 └── markRaw() → 非响应式标记选择指南使用reactive当处理对象/集合且需要深度响应使用ref当处理原始值或需要替换整个对象引用使用computed当值依赖其他响应式数据使用readonly当需要防止意外修改使用shallow*系列优化性能或集成外部库使用toRefs当需要解构reactive对象TypeScript 类型关系示例// 基本类型关系 type ReactiveT T extends object ? T : never type RefT { value: T } type ComputedRefT ReadonlyRefT // 实际使用 const state reactive({ count: 0 }) // Reactive{ count: number } const count ref(0) // Refnumber const doubled computed(() count.value * 2) // ComputedRefnumber这个总结涵盖了Vue 3响应式系统的主要API及其类型关系帮助开发者根据具体场景选择合适的响应式工具。在 Vue 3 中响应式值的类型不一定是Ref但使用ref()创建的响应式变量确实是RefT类型。Vue 3 提供了多种创建响应式数据的方式每种方式对应不同的类型1.ref()→ 类型是RefT用于创建基本类型如number、string、boolean或普通对象的响应式引用。import { ref } from vue const count ref(0) // Refnumber const name ref(Alice) // Refstring const obj ref({ a: 1 }) // Ref{ a: number }访问/修改需要.valueconsole.log(count.value) // 0 count.value // 修改2.reactive()→ 类型是原始对象的代理Proxy不是Ref用于创建对象或数组的深层响应式副本。import { reactive } from vue const state reactive({ count: 0, name: Alice }) // { count: number; name: string }直接访问属性不需要.valueconsole.log(state.count) // 0 state.count // 修改⚠️ 注意reactive()返回的是一个 Proxy 对象其 TypeScript 类型就是你传入对象的类型如{ count: number }不是Ref。3.shallowRef()/shallowReactive()→ 浅层响应式shallowRefT()→RefT但只对.value本身响应内部对象属性非响应式shallowReactiveT(obj)→T只对顶层属性响应4. 在script setup中配合defineModel、props等props是reactive对象不可变类型为Readonly...defineModel()返回的是Ref如何判断一个值是不是Ref使用 Vue 提供的工具函数import { isRef, isReactive } from vue isRef(count) // true如果是 ref 创建的 isReactive(state) // true如果是 reactive 创建的总结创建方式返回类型是否需要.value适用场景ref(value)RefT✅ 是基本类型、单个值reactive(obj)TProxy 代理的对象❌ 否对象、数组等复杂结构shallowRef()RefT浅层✅ 是大型对象性能优化shallowReactive()T浅层 Proxy❌ 否仅需顶层响应式所以只有通过ref()及其变体如computed、shallowRef创建的响应式变量才是Ref类型而reactive()创建的是普通对象类型的响应式代理不是Ref。补充computed也是Refimport { computed } from vue const doubled computed(() count.value * 2) // ComputedRefnumber是 Ref 的子类型computed返回的是ComputedRefT它继承自RefT所以也可以用.value访问并且isRef(doubled)为true。