ref1. 先搞懂一个核心问题Vue 怎么知道你改了数据然后刷新页面Vue 需要盯着你的变量一变就自动更新网页上显示的内容。普通变量 Vue 盯不住letnum1num2Vue完全没感知页面数字不会变。2. ref 干的唯一一件事给变量套一层「监控外壳」ref(里面的值)会生成一个外壳对象Vue 专门盯着这个外壳。import{ref}fromvueconstnumref(1)底层真实结构可以理解成这样num{// 真正存数字的地方value:1,// Vue偷偷藏了监听代码}外壳numVue能看见、能监控真正的数据藏在.value里面。改数据的时候必须改 .valuenum.value2Vue 检测到你修改了外壳里的 value立刻刷新页面。如果你写成num 2直接把整个监控外壳扔掉了Vue 失去监控页面不动。3. 模板里为什么不用 .value模板是 Vue 单独处理的语法它会自动帮你读取.value。!-- 不用写 num.value -- div{{ num }}/div4. 最简可运行对比一眼看出差别例子1不用 ref页面不更新script setupletcount0functionadd(){countconsole.log(count)// 控制台数字变了页面不动}/scripttemplatep数字{{count}}/pbutton clickadd点我1/button/template例子2用 ref页面同步更新script setupimport{ref}fromvue// 套监控外壳constcountref(0)functionadd(){// 修改外壳内部的值count.value}/scripttemplatep数字{{count}}/pbutton clickadd点我1/button/template5. ref 第二个用途获取页面DOM标签你想操作页面上的输入框、按钮JS原生拿DOM很麻烦用ref绑定script setupimport{ref,onMounted}fromvue// 空的监控外壳专门存input元素constinputDomref(null)// 页面渲染完后onMounted((){// inputDom.value 就是页面里的input标签inputDom.value.focus()// 自动光标聚焦输入框})/scripttemplate!--ref名字和变量对应--input refinputDomplaceholder搜索//templateVue 把 ref 做成了模板特殊指令自动帮你完成「查找 DOM、存入变量」这一步不用手写 querySelector这是框架封装出来的语法。补充对比input idsearchInputplaceholder搜索script// 原生必须手动根据id获取DOMconstinputdocument.getElementById(searchInput)// 页面加载完才能操作window.onloadfunction(){input.focus()}/scriptVue 简化后不用写选择器靠同名 ref 自动绑定是框架提供的便利语法。6. 一句话终极总结ref 给数字/字符串/布尔/DOM标签包一层 Vue 能监控的外壳代码里改值要.value模板里直接写变量名。reactive1. reactive 和 ref 是亲兄弟作用一样让数据变响应式改了页面自动更新区别只在于装的数据类型不一样ref装单个简单值数字、字符串、布尔、DOM要用.valuereactive专门装对象、数组不用写.value2. 先看对比一眼看懂场景1表单对象用 reactiveimport{reactive}fromvue// 把整个表单变成响应式constformreactive({filename:,status:,id:0})// 直接点属性修改不用 .valueform.filename测试文档.pdfform.statussuccess场景2如果硬用 ref 写对象麻烦constformref({filename:})// 修改必须两层 .value很啰嗦form.value.filenamexxx3. reactive 底层原理ref 是套一层{ value: xxx }reactive 直接把整个对象本身变成可监听代理不用包一层盒子所以不用.value。4. 数组也用 reactiveconstdocListreactiveDocumentRead[]([])// 直接push、修改数组页面自动刷新docList.push({id:1,filename:a.pdf,status:})5. 核心优缺点优点修改属性简洁不用每次打.value表单、列表首选。大坑重点不能直接替换整个对象会丢失响应式constformreactive({name:})// ❌ 错误直接覆盖整个对象Vue 失去监听form{name:新名字}// ✅ 正确只改里面属性form.name新名字ref 就没这个问题constformref({name:})// 可以直接替换 .valueform.value{name:新名字}6. ref 和 reactive 选择口诀单个数字/字符串/布尔 / DOM引用 →ref表单、JSON对象、列表数组 →reactive7. 配套工具 toRefs高频搭配 reactive如果你想把 reactive 对象拆分成单独变量不丢失响应式import{reactive,toRefs}fromvueconstformreactive({name:,id:1})// 解构出独立ref变量const{name,id}toRefs(form)// 此时 name、id 是 ref修改需要 .valuename.value张三一句话总结reactive是 Vue 提供的API专门把对象、数组转为响应式直接.属性修改不用写.value适合表单、列表这种复杂结构数据。