大家好我是Java1234_小锋老师最近更新 《一天学会 Vue3 Vite element-plus UI框架 视频教程》专辑感谢大家支持。本课程主要介绍和讲解 Vue3框架Vite构建工具以及element-plus UI框架。Vue3核心知识介绍Vite构建工具使用以及element-plus UI框架的基础组件配置组件Form 表单组件Data数据展示组件Navigation导航组件Feedback反馈组件Container布局组件介绍和使用。视频教程课件源码打包下载链接https://pan.baidu.com/s/1o-zRfndo1HHrS_uFroOiCw?pwd1234提取码1234具体位置 - 第四阶段富客户端技术里面Vue3专题 - 响应式基础Vue3 的核心能力之一是响应式系统数据变化时依赖这些数据的视图或逻辑会自动更新。理解ref、reactive、computed、watch就能写出大部分常见交互。1. 什么是响应式简单理解把普通数据变成「可追踪」的响应式数据组件里用到这些数据时Vue 会记录依赖关系数据一改相关界面自动重新渲染Vue3 底层主要用Proxy实现响应式比 Vue2 的Object.defineProperty更强大、更灵活。2. 核心 API 速览API用途典型场景ref包装基本类型或任意值计数、开关、字符串、对象也可以reactive包装对象得到深层响应式对象表单对象、配置对象computed根据已有状态派生新值总价、过滤列表、全名watch/watchEffect监听变化并执行副作用请求接口、本地存储、日志3.ref—— 最常用ref可以包装任意类型。在script setup里用.value读写在模板里会自动解包不用写.value。script setup import { ref } from vue // 包装数字 const count ref(0) // 包装字符串 const title ref(Hello Vue3) function add() { count.value // 脚本里必须用 .value } /script template !-- 模板里直接用 count不用 .value -- h1{{ title }}/h1 p当前计数{{ count }}/p button clickadd1/button /template要点脚本中count.value模板中{{ count }}ref既能包基本类型也能包对象运行截图4.reactive—— 适合对象reactive专门用于对象Object / Array返回的是 Proxy 代理对象不能整体替换适合表单、配置这类结构。script setup import { reactive } from vue const form reactive({ username: , age: 18, hobby: [读书, 跑步] }) function update() { form.username 小明 // 直接改属性不需要 .value form.age form.hobby.push(游泳) } /script template p用户名{{ form.username }}/p p年龄{{ form.age }}/p p爱好{{ form.hobby.join(、) }}/p button clickupdate更新资料/button /templaterefvsreactive怎么选基本类型number / string / boolean→ 用ref一组相关字段的对象 → 可用reactive也可用ref({})不确定时优先用ref写法更统一也方便整体替换user.value { ... }运行截图5.computed—— 计算属性根据已有响应式数据「计算」出新值有缓存依赖不变时不会重复计算。script setup import { ref, computed } from vue const price ref(100) const count ref(2) // 总价 单价 × 数量 const total computed(() price.value * count.value) /script template p单价{{ price }}/p p数量{{ count }}/p p总价{{ total }}/p button clickcount数量 1/button /template注意计算属性默认是只读的一般不要在里面改数据只负责「算」。运行截图6.watch—— 侦听变化数据变化时执行副作用发请求、写本地存储、打印日志等。script setup import { ref, watch } from vue const keyword ref() // 监听单个 ref watch(keyword, (newVal, oldVal) { console.log(关键词从, oldVal, 变成, newVal) // 这里可以发搜索请求 }) /script template input v-modelkeyword placeholder输入搜索词 / /template运行截图常用选项watch(keyword,(newVal){// ...},{immediate:true,// 一上来就先执行一次deep:true// 深度监听对象内部变化监听 reactive / 对象时常用})watchEffect则更省事自动收集回调里用到的依赖一有变化就执行import{ref,watchEffect}fromvueconstcountref(0)watchEffect((){console.log(count 当前是,count.value)})