企业官网建设流程全解析

高端网站设计建设,python 建设网站,重庆百度搜索优化,网站评论设计这篇文章的目标只有一个#xff1a;让你在任何场景下#xff0c;都能毫不犹豫地判断#xff1a;这个地方该用 ref#xff0c;还是 reactive 目录响应式的本质不是变量ref 是什么#xff1f;什么时候该用 ref#xff1f;ref 的本质什么时候必须用 ref#xff08;重点让你在任何场景下都能毫不犹豫地判断这个地方该用ref还是reactive目录响应式的本质不是变量ref 是什么什么时候该用 refref 的本质什么时候必须用 ref重点场景 1基本类型场景 2对象 / 数组会被整体替换场景 3对象是“状态”而不是“模型”ref 的优缺点reactive 是什么什么时候该用 reactivereactive 的本质什么时候 reactive 是最优解场景 1表单对象场景 2长期存在的业务模型reactive 的优缺点对象到底用 ref 还是 reactive响应式是怎么“失去”的reactive 失效的三大原因ref 失效的常见原因toRef / toRefs解决解构问题toRef 是什么toRefs 批量使用总结响应式的本质不是变量在 Vue3 里响应式的本质不是变量而是“引用关系”ref用一个对象包住一个值通过 .value 访问reactive用 Proxy 代理一个对象⚠️Vue 追踪的不是变量名而是 ref.value 或 Proxy 内部的属性访问ref 是什么什么时候该用 refref 的本质constcountref(0)count 是一个对象真正的值在 count.valueVue 通过 getter / setter 追踪 .value在模板里{{count}}// 自动解包在js/ts中count.value什么时候必须用 ref重点场景 1基本类型constloadingref(false)constpageref(1)constkeywordref()场景 2对象 / 数组会被整体替换constlistrefItem[]([])list.valueres.data如果用 reactiveconstlistreactive([])listres.data// ❌ 直接失效只要你会写 重新赋值就用 ref场景 3对象是“状态”而不是“模型”什么是状态什么是模型constcurrentRowrefRow|null(null)有 / 没有选中 / 取消打开 / 关闭这是状态不是业务结构ref 的优缺点优点可以整体替换可以为 null / undefined解构安全状态语义清晰缺点JS 中需要 .value对象层级深时略显啰嗦reactive 是什么什么时候该用 reactivereactive 的本质constformreactive({name:,age:18})返回的是一个 Proxy每个属性访问都会被 Vue 追踪没有 .value什么时候 reactive 是最优解场景 1表单对象constformreactive({name:,age:0,role:})原因字段多高频修改单字段v-model 非常频繁不需要整体替换场景 2长期存在的业务模型conststatereactive({loading:false,page:1,pageSize:10})这些数据生命周期一致逻辑上属于一组不会被整体重置reactive 的优缺点优点写法自然表单 / v-model 体验极佳代码可读性高缺点❌ 不能整体替换❌ 不能为 null❌ 解构会丢响应式对象到底用 ref 还是 reactive四个问题法直接用refreactive会不会被整体替换会 - ref不会 - reactive关心对象是谁or字段怎么变是谁 - ref字段 - reactive会不会大量 v-model会 - reactive是不是长期业务模型是 - reactive响应式是怎么“失去”的reactive 失效的三大原因formnewForm// ❌ 整体替换const{name}form// ❌ 解构JSON.parse(JSON.stringify(form))// ❌ 深拷贝正确做法Object.assign(form,newForm)ref 失效的常见原因constccount.value// ❌ 断开引用因为这里只是把count这个响应式的值给了c而已toRef / toRefs解决解构问题toRef 是什么constnametoRef(form,name)把 reactive 的某个字段变成 ref双向同步toRefs 批量使用const{name,age}toRefs(form)它们的原理都是 把reactive内的变量都解构成响应式的ref包裹的变量总结reactive 负责“结构”ref 负责“状态”