广州设计网站培训学校,建设官网公司地址,怎么制作美图素材图片,wordpress边栏时间一、写在前面如果说前面几篇文章#xff0c;你还可以把 Vue3 理解成#xff1a;会显示数据会绑定事件会渲染列表会做基础交互那么从这一篇开始#xff0c;你就真正走到了 Vue3 的核心区域。因为只要你继续往后学#xff0c;很快就会频繁遇到这些代码#xff1a;script…一、写在前面如果说前面几篇文章你还可以把 Vue3 理解成会显示数据会绑定事件会渲染列表会做基础交互那么从这一篇开始你就真正走到了 Vue3 的核心区域。因为只要你继续往后学很快就会频繁遇到这些代码script setup import { ref, reactive } from vue const count ref(0) const user reactive({ name: 张三, age: 20 }) /script很多新手第一次看到这种写法时内心都会冒出一串问题setup到底是什么为什么不再像以前那样写data()ref和reactive有什么区别为什么有时候要.value有时候又不要为什么模板里和 JS 里的写法还不一样如果这些问题不理清楚后面你学computedwatch组件通信Pinia项目实战都会越来越乱。所以这一篇文章我们不求一下子学很深但一定要把 Vue3 最核心的几个底层认知先搭稳。二、为什么 Vue3 要主推 Composition API先说结论Composition API 是 Vue3 更推荐的组织组件逻辑的方式。这里最容易卡住的不是“它怎么写”而是“它为什么出现”。所以我们先不急着记语法先把背景理解清楚。三、Vue2/传统写法为什么会让大型组件变乱在过去更常见的写法里一个组件通常会这样组织export default { data() { return { count: 0, name: 张三 } }, methods: { add() { this.count } }, computed: { doubleCount() { return this.count * 2 } } }这类写法本身没有问题而且对初学者其实也比较直观。因为它是按“功能类别”来分区的数据放data方法放methods计算属性放computed小组件里这样写很清楚。但问题在于当一个组件逻辑越来越复杂时同一个功能相关的代码会被拆散到很多地方。比如你现在有一个“用户信息模块”它可能涉及用户数据用户校验方法用户相关监听用户相关计算属性在传统分法里这些逻辑会散落在datamethodscomputedwatch几个不同区域中。代码一多以后你维护起来就很难从“功能逻辑”的角度去理解而只能从“配置项分类”的角度去跳着看。这就是 Composition API 出现的重要原因之一。四、Composition API 到底解决了什么问题一句话概括它让你可以按照“功能逻辑”来组织代码而不是按照“配置选项”来拆代码。也就是说在 Vue3 里你可以把“同一类业务逻辑”写得更集中。例如计数器相关的数据、方法、计算逻辑放一起用户资料相关的数据、方法、监听逻辑放一起表单相关的校验和状态放一起这就是“组合式”的意思。它不是说“把东西乱混在一起”而是说把同一个功能用到的状态和逻辑组合到一起。这对于复杂组件、逻辑复用、中大型项目来说会更清晰。五、什么是setup这是很多新手最先卡住的地方。先记一句最重要的话setup是 Composition API 的入口。你可以理解成以前组件常常从data / methods / computed开始组织现在组件更常常从setup开始组织也就是说在 Vue3 组合式写法里很多数据、方法、逻辑都会先在setup里定义。1. 一个最基础的setup写法script export default { setup() { const message 你好Vue3 return { message } } } /script template h1{{ message }}/h1 /template这里的意思是在setup()里定义了一个变量message通过return把它暴露给模板模板里就可以使用它所以你可以先把setup理解成组件逻辑初始化和组织的地方。2. 为什么模板里能用setup里的变量因为你把它return出去了。例如setup() { const name 张三 return { name } }那么模板里就能写h1{{ name }}/h1如果你没有return模板通常就访问不到。六、什么是script setup你现在学 Vue3 时大概率看到的不是传统setup()写法而是这种script setup const message 你好Vue3 /script template h1{{ message }}/h1 /template这就是 Vue3 里非常常见的script setup语法糖。1. 它和普通setup()的关系是什么你可以把它理解成script setup本质上就是setup()的一种更简洁写法。也就是说下面这种script export default { setup() { const message 你好Vue3 return { message } } } /script大致可以简化成script setup const message 你好Vue3 /script它自动帮你处理了很多样板代码所以写起来更清爽。2. 为什么现在大家更常用它因为它有几个非常明显的优点写法更短不用手动return可读性更强更适合 Vue3 新项目和组合式 API 搭配更自然所以你现在学 Vue3主线就可以直接按script setup来学。七、为什么普通变量在 Vue 里不一定能响应更新先看一个例子script setup let count 0 const add () { count } /script template div p{{ count }}/p button clickadd加一/button /div /template很多新手会以为点击按钮后页面会从0变成1、2、3……但实际上这样写通常不会按你想象的那样正常响应更新。为什么因为普通变量虽然变了但 Vue 不一定能追踪它的变化并通知页面刷新。这就引出了一个非常核心的概念响应式数据。八、什么是响应式数据一句话解释当数据变化时Vue 能感知到并自动更新依赖它的页面内容。也就是说Vue 不只是关心“你有没有改变量”而是关心这个变量是不是 Vue 能追踪的它变了以后页面要不要跟着更新普通变量很多时候只是 JS 层面变了而 Vue 的响应式数据是“JS 数据变化 Vue 能感知 页面自动更新”这一整套机制。所以在 Vue3 里你经常不会直接用普通变量去做状态而是会使用refreactive它们的核心任务就是把数据变成 Vue 能追踪的响应式数据。九、ref是什么先记最核心的一句话ref用来定义响应式数据。最常见的写法是script setup import { ref } from vue const count ref(0) /script这里的意思就是你定义了一个初始值为0的响应式数据count当它变化时Vue 能追踪到变化1. 一个最基础的ref示例script setup import { ref } from vue const count ref(0) const add () { count.value } /script template div p{{ count }}/p button clickadd加一/button /div /template点击按钮后页面数字会不断变化。这个例子非常重要因为它说明ref定义的数据是响应式的数据变了页面会自动更新2. 为什么是count.value而不是count这是 Vue3 新手最经典的问题之一。因为ref()返回的不是原始值本身而是一个包装后的响应式对象。你可以粗略理解成它长这样const count { value: 0 }当然真实实现更复杂但你前期可以这么理解。所以你真正存的数据在value里面。因此在 JS 逻辑里读写它时通常要写count.value例如count.value十、为什么模板里又不用写.value这也是大家最容易困惑的地方。你看在 JS 里是这样count.value但模板里却可以直接写p{{ count }}/p为什么因为在模板中Vue 会自动帮你“解包”ref。你可以简单理解成JS 中你要自己明确访问.value模板中Vue 帮你自动取出了里面的值所以你前期直接记一个非常实用的规则就够了JS 里访问ref通常写.value模板里通常不用写。这个规则非常重要后面你会反复用到。十一、ref适合定义什么数据新手阶段你可以先这样理解ref很适合定义基本类型数据也可以定义对象和数组。比如这些都可以定义数字const count ref(0)定义字符串const title ref(Vue3 学习)定义布尔值const isShow ref(true)定义数组const list ref([1, 2, 3])定义对象const user ref({ name: 张三, age: 20 })所以严格来说ref不只是给基本类型用。它很通用。只是对新手来说最常见、最容易建立直觉的用法是先拿它处理数字、字符串、布尔值。十二、reactive又是什么如果说ref是 Vue3 里最常用的响应式工具之一那么reactive就是另一个核心选手。先记一句话reactive主要用于把对象变成响应式对象。最典型写法是script setup import { reactive } from vue const user reactive({ name: 张三, age: 20 }) /script这表示user是一个响应式对象user.name、user.age的变化Vue 都能追踪1. 一个最基础的reactive示例script setup import { reactive } from vue const user reactive({ name: 张三, age: 20 }) const changeName () { user.name 李四 } /script template div p姓名{{ user.name }}/p p年龄{{ user.age }}/p button clickchangeName修改姓名/button /div /template点击按钮后页面中的姓名会更新。这说明reactive定义的对象是响应式的你修改对象属性时页面会自动更新2. 为什么reactive不用.value因为它和ref的设计不同。reactive返回的是一个“代理后的响应式对象”所以你通常直接通过属性访问user.name user.age而不是user.value.name所以你可以先把这两者区别记成ref常常通过.value访问reactive通常直接访问对象属性十三、ref和reactive到底有什么区别这是整篇文章最关键的部分之一。很多新手不是不会写而是一直分不清该用哪个。我们把它拆开来说。1. 数据形态上的直观区别ref更像是“给一个值包了一层响应式外壳”。const count ref(0)访问时通常count.valuereactive更像是“直接把整个对象变成响应式对象”。const user reactive({ name: 张三, age: 20 })访问时通常user.name2. 使用习惯上的区别对新手来说一个比较好记的经验是基本类型优先想到ref对象结构优先想到reactive例如const title ref(标题) const isShow ref(true) const count ref(0) const user reactive({ name: 张三, age: 20 })这个思路前期非常够用。3. 但要注意ref也能包对象比如const user ref({ name: 张三, age: 20 })也是合法的。只是这时候在 JS 中访问就会变成user.value.name很多新手会觉得这有点绕。所以在实际开发里如果你面对的是一个结构比较明显的对象很多人会更倾向于用reactive因为写起来更自然。4. 那是不是以后对象都用reactive也不能这么绝对。因为在真实开发中很多人为了统一心智和书写习惯也会大量使用ref。尤其是在一些组合逻辑、可复用函数、与其他 API 配合时ref非常常见。所以你前期不要把它理解成死规则更好的理解方式是ref更通用reactive更偏对象场景。十四、什么时候用ref什么时候用reactive给你一个新手最实用的判断法。1. 遇到简单值优先用ref例如数字计数是否显示当前标题输入框内容选项状态const count ref(0) const isShow ref(false) const title ref(首页) const keyword ref()2. 遇到一组相关字段优先考虑reactive例如用户信息表单数据商品对象学生对象const user reactive({ name: 张三, age: 20, city: 北京 })这种场景下用reactive写起来会更顺手。3. 前期不要过度纠结“最优解”这是很现实的一点。很多新手刚学到这里就开始不断想这个场景到底必须用哪个用错会不会很严重面试官会不会说我不规范其实前期最重要的不是抠极限细节而是先把核心认知建立起来两者都是响应式工具ref常见于简单值也很通用reactive更适合对象场景模板里会自动解包refJS 中通常要注意.value只要这些清楚了你后面做练习自然会越来越顺。十五、一个综合案例同时理解ref和reactive下面给你一个很适合新手过渡的综合小例子script setup import { ref, reactive } from vue const count ref(0) const user reactive({ name: 张三, age: 20 }) const add () { count.value } const changeUser () { user.name 李四 user.age 21 } /script template div h2计数{{ count }}/h2 button clickadd加一/button hr / p姓名{{ user.name }}/p p年龄{{ user.age }}/p button clickchangeUser修改用户信息/button /div /template这个例子里count是单独的数字状态用refuser是成组的信息用reactive这样你就能很直观地感受到两种工具在实际页面中的分工。十六、新手最常见的几个坑这一部分非常重要因为几乎每个初学者都会踩。1. 忘记给ref写.value例如const count ref(0) const add () { count }这通常是不对的。正确写法应是count.value记住在 JS 逻辑里操作ref通常要写.value。2. 模板里反而多写了.value例如p{{ count.value }}/p虽然某些情况下可能不一定完全报错但前期不建议这么写。你最好养成标准习惯模板里直接写count不要手动写.value。3. 把普通变量当响应式变量用例如let title 首页然后你期待它改了页面就自动更新。这往往不行。如果这个数据要驱动页面变化就要优先考虑const title ref(首页)4. 把reactive当成普通对象随意整体替换例如user { name: 李四, age: 22 }这种写法通常就不对了因为reactive返回的是响应式对象你前期更常见的正确操作是改它的属性user.name 李四 user.age 225. 一上来就死抠底层实现这一点我特别想提醒新手。现在这个阶段你不需要把 Vue3 响应式系统的源码机制全部搞懂。你最需要先建立的是“使用层面的清晰认知”。也就是先弄明白响应式数据是什么ref和reactive干什么.value为什么存在模板为什么又不用.value先把这些用顺比一开始钻源码有效得多。十七、这一篇学完后你应该达到什么程度如果你把这篇真正理解了那么至少应该能做到下面这些事知道 Vue3 为什么更强调 Composition API知道setup是组合式 API 的入口知道script setup是更简洁的写法能用ref定义基本响应式状态能用reactive定义响应式对象知道为什么 JS 里常写.value知道模板里通常不用写.value能初步判断什么时候用ref什么时候用reactive如果这些点你已经顺了那么你就正式跨过了 Vue3 入门里最重要的一道坎。十八、总结这一篇文章我们正式进入了 Vue3 最核心的区域Composition API 与响应式数据。把最重要的内容再浓缩一下就是下面这些Composition API让代码可以按功能逻辑来组织setup是组合式 API 的入口script setup是更简洁、更常用的写法响应式数据的意义在于数据变了页面能自动更新ref用来定义响应式数据尤其常见于基本类型reactive更适合把对象变成响应式对象JS 中访问ref通常写.value模板中 Vue 会自动解包ref如果说前面那几篇文章让你开始“会写 Vue 页面”那么这一篇的作用就是让你开始真正理解Vue3 到底是靠什么把“数据变化”和“页面更新”连起来的。这会直接决定你后面学computed、watch、组件通信时能不能真正学顺。