响应式核心：ref 与 reactive-北京尧图网络

响应式核心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

响应式核心：ref 与 reactive

相关推荐

RAID 5配置全流程详解：从原理到实战的存储基石搭建

Atmosphere系统架构解析：分层设计的定制化固件实现

自旋霍尔效应超表面设计与FDTD仿真优化

更多资讯

OpenSearch Service向量数据库实践：混合检索与成本优化

价值投资视角下的智能农业灌溉优化系统分析

AI-Native SDLC实战：Claude Code与MCP驱动开发全流程

OWASP MASTG 深度解析：Android Activity 组件、Intent 访问控制与攻击面评估

如何为 skills-manage 贡献代码：开发环境搭建、验证命令与 PR 规范完整开发者指南

MCP没赢，CLI没输：Pi接入MCP的生态逻辑与配置指南

今日更新

基于sEMG与IMU的手语手势识别：从数据采集到实时部署避坑指南

装配车间MES落地指南：SimpleMES工单流转、BOM与齐套检查实战

AI获客怎样减少重复线索？意客AI的原文复用与版本筛选

本周精选

CMOS设计三大物理效应：体效应、沟道长度调制与亚阈值导电

微信小程序在线阅读毕设全解析：Java后端+MySQL+避坑实战

Android音频问题五层分析法：从App到Codec的系统化诊断

本月热门

我发现了一个新思路：用 Remotion + Claude Code 像写代码一样自动化生成短视频

Windows下 Codex 中 Chrome 和 Computer Use 插件不可用问题排查及解决参考方式：TaoToken 统一 Key 配置与验证

2026 大模型集体涨价：用 Python 做企业 Token 成本测算与选型避坑（附配置）

读完文章，想聊聊您的网站？