响应式核心ref 与 reactive理解 Vue3 响应式的基本原理掌握ref和reactive的定义、使用与选型熟练使用script setup语法糖组织代码1. 响应式原理一句话数据变化时页面自动更新。Vue3 实现三部曲代理Proxy把数据对象包一层代理所有读写都经过它读取记账模板渲染时读数据代理记下“谁在用这个数据”收集依赖修改广播数据被改代理通知所有依赖它的地方重新渲染2.ref—— 单个值的“快递盒”为什么需要 refProxy只能代理对象不能直接代理基本类型数字、字符串。ref 将基本类型包装成对象{ value: 实际值 }再对这个对象做代理。基本用法import{ref}fromvueconstcountref(0)// 定义count.value// 修改必须 .valueconsole.log(count.value)// 读取必须 .value模板中自动拆箱templatep{{ count }}/p!-- 直接写 count不用 .value --buttonclickcount1/button/template口诀JS 里.value模板里不用。ref 可以存任何值constuserref({name:林小满})// 对象也可以装进 refuser.value.name小满// 修改仍需 .value内部原理ref 存对象时会用reactive处理.value里的对象使其深层响应式。3.reactive—— 一组数据的“玻璃柜”适用场景适合处理对象或数组所有属性被自动代理无需.value。import{reactive}fromvueconstuserreactive({name:林小满,age:18})user.age// 直接操作属性user.name小满重要限制不能整体替换user reactive({...})或user { ... }会丢失响应性原来的代理被替换掉了解构会丢失响应const { name } user解出的name是普通值修改后页面不更新只接受对象/数组不能传入基本类型正确做法用ref存需要整体替换的对象const user ref({...})替换时user.value newObj直接通过user.xxx修改属性而不是解构4.refvsreactive选型指南场景推荐原因单个值数字/字符串/布尔refreactive 不支持基本类型一组相关数据且很少整体替换reactive少写 .value语义清晰数据可能整体替换如从接口获取新对象refreactive 整体替换会失效对象/数组但不确定用哪种ref官方推荐默认使用 ref行为更统一选型口诀单值用 ref整组用 reactive拿不准就 ref。5.script setup语法糖script setup是 Vue3 推荐的单文件组件写法自动暴露顶层变量和函数给模板无需return。对比!-- 旧写法必须在 setup() 中 return -- script export default { setup() { const count ref(0) return { count } // 必须 return } } /script!-- 新写法script setup 自动暴露 -- script setup const count ref(0) // 顶层变量模板可直接使用 /script三大自动顶层变量 → 模板直接使用顶层函数 → 模板直接绑定事件import 引入的组件 → 模板直接作为标签使用第7课6. 实战要点可编辑个人资料页数据设计思路单个状态值如编辑开关editing、座右铭索引→ref一组关联的资料对象如profile、编辑草稿form→reactiveconstprofilereactive({name:林小满,title:前端,city:杭州,intro:...,skills:[...]})constformreactive({name:,title:,city:,intro:})consteditingref(false)编辑流程进入编辑将profile的值拷贝到formediting.value true表单输入使用:value配合input实现双向数据绑定input:valueform.nameinpute form.name e.target.value/本质是 Vue 的v-model第6课正式学此处手动演示原理。保存将form的值回写到profileediting.value false视图自动更新取消直接editing.value false草稿丢弃座右铭轮换ref 应用constmottoes[代码如诗,写注释,先跑通再优化]constmottoIndexref(0)functionnextMotto(){mottoIndex.value(mottoIndex.value1)%mottoes.length}7. 常见错误与排查错误写法现象正确写法editing true忘 .value页面无反应editing.value true{{ count.value }}模板多用 .value显示 undefined 或空白{{ count }}user reactive({...})整体替换 reactive页面不更新用ref存对象或逐属性修改const { name } user解构 reactive改 name 页面不更新直接user.name ...记忆reactive 是“玻璃柜”只能动柜子里的东西不能把柜子整个换掉。小结速查概念要点响应式代理 广播 自动重渲染ref装盒JS 里.value模板里自动拆可存任何类型reactive装柜直接操作属性不能整体替换不能解构选型单值 → ref整组 → reactive不确定 → refscript setup顶层变量/函数自动暴露无需 return