❌

阅读视图

发现新文章，点击刷新页面。

一张草图变网页，实测字节 TRAE SOLO，这些功能甚至比 Cursor 还好用

✇爱范儿
张子豪

AI 编程火了这么久，无论是开发者还是我们普通人，都能让 AI 来帮忙做个小游戏、捣鼓点小工具。

有时候还真别说，那些 AI 做的小玩意，的确能起到点作用。很多读者也经常在留言区评论，现在最好的编程模型是什么？

Claude 4.5 + Cursor 自一直是很多开发者的首选，但它们由于种种原因对中国用户都不太友好，结果是花同样的钱开会员，有可能很多模型都用不了。

好消息，这次我们不会被「卡脖子」了。

昨天，字节发布了他们的编程工具，TRAE 3.0，我们体验了一下，在某种程度上，TRAE 可以说就是一个国产版 Cursor，甚至部分功能做得比 Cursor 还要好。

其中，最核心的功能 SOLO 模式，是之前所有同类产品，没有探索过的 AI 编程工具形态。它提供了 SOLO Coder 和 SOLO Builder 两个智能体，一个针对专业的开发者用户，处理复杂的项目开发问题；一个针对个人和小团队，真正做到一句话做个产品，能上线发布的产品。

这两个 SOLO 智能体，把过去传统软件开发，涉及到的全部工作基本都包揽了。目前 SOLO 模式正在限免期，前往 trae.ai 下载安装，登录之后就能免费体验到 15 号。

限免期之后，TRAE 的会员计划也比 Cursor 更良心，首月是 3 美元，次月开始 10 美元。和免费用户的区别就是在模型调用、快速响应上的额度分配不同。

SOLO 模式，让编程更加 Vibe

SOLO 模式其实最早是在 TRAE 2.0 的时候推出的，当时只是用来快速生成一个应用。而更新的 TRAE 3.0 版本中，是把快速生成的应用，能做得更复杂，还给专业开发者带来了更高效的功能。

之前，我们使用大多数的编程产品，或者就是要 ChatGPT、Gemini 这些通用助手，来进行 vibe coding。

本质上还是，我们单纯地跟模型进行对话，解决某一个具体的问题，最后的产出也比较有限，一般就是一个我们看都看不懂的代码文件，点个预览就够了。

但现在，TRAE SOLO 模式改变了过去传统的开发工具、或者 AI 聊天编程产品的形态。它整体的布局更像一个大模型助手的智能体界面，没有了中间的代码编辑器，最左边也不是文件管理器，而变成了任务列表。

SOLO Coder：面向复杂项目开发

TRAE 提供了 Coder 和 Builder 两个选项，SOLO Coder 主要是针对复杂的项目开发，更专业的应用场景。一般是我们有现成的项目，可以通过 Coder 来完成一些项目迭代、Bug 修复和架构重构等。

我们选择了一个 GitHub 上的开源项目，动辄上千上万行的代码，根本看不懂。然后直接问他有没有什么更好的网络结构等组件，可以让这个方法的效果更好。

▲ 指令下达后，直接开始执行，帮我完成各种包的安装，实时跟随会自动切换不同的工具面板。

前几天我刷社交媒体，看到有人在问，大家在 vibe coding 等结果的过程中一般做什么。

有人说真正的 Vibe 是应该打开手机开始刷视频，也有人说会盯着 AI 的每一步操作，防止它莫名其妙删库跑路，还有说再开一个 Agent 来执行其他任务。

SOLO 模式似乎也考虑到了这一点，在任务处理过程中，是可以多任务并行的，意思是我们可以同时执行多个项目。同时，SOLO 智能体在调用不同的工具过程中，会可视化全部的工具调用流程、自动切换不同的工具面板，TRAE 把这一点叫做「实时跟随」。

和 TRAE 2.0 会显示当前使用的模型不同，在 Claude 彻底断供之后，TRAE 3.0 在 SOLO 模式下，只会显示 Max 模型，且不能自定义选择模型。

SOLO Builder：从零构建一个应用

SOLO Coder 还是有点太专业了。另一个智能体，SOLO Builder 在某种程度上，则是一款很典型的 vibe coding 产品，和我们之前分享过的 Lovable 一样，它主打的是从零开始，一句话构建一个产品。

但不同的是，SOLO Builder 能凭借 TRAE 自身强大的开发环境，真正做出一个大规模可用的产品，不会停留在做一个小玩意路线上。

一款应用从构思到最后真正上架到 App Store，中间要完成的需求分析、UI 设计、系统环境等等，都可以在 SOLO Builder 中，通过 AI 来完成。TRAE 提供了包括编辑器、文档、终端、浏览器、Figma、智能体、MCP在内的多个工具。

▲ 开始写项目需求文档和技术架构文档

通过调用不同的工具，仿佛真的有一个助手在操作我们的电脑：在写清楚产品需求文档后，默默地又开始写代码来实现，最后再自己测试代码、部署整个项目；把产品经理、程序员、测试、运维的活全干了。

我们输入了一个需求，是让它做一个摸鱼 APP。得到了对应的文档之后，SOLO Builder 不会立刻执行，而是让我们先确认这个计划是否可行。此刻我们就是项目经理，告诉 AI 来 Align（对齐）一下颗粒度，不行就要 AI 再回去修改文档。

在 SOLO Coder 智能体，同样有「Plan 计划」的开关，先让模型规划怎么做，我们再确认。

一切顺利，我们得到了最后的摸鱼 App，TRAE 还贴心的提供了一个推荐操作，让我们把项目部署到 Vercel（托管网站的平台）上，而不仅仅是本地访问。

不过，SOLO 模式目前还只在国际版推出，国内版本可以通过加入候补名单，等待上线。

▲候补链接：https://www.trae.cn/solo

豆包编程模型，TRAE 的国产版核心

虽然国内版本还没有 SOLO 模式，但是字节最新的豆包编程模型，已经在 TRAE 国内版上线了。

▲Doubao-Seed-Code 生成的技能五子棋页面截图

Doubao-Seed-Code 是字节这周二发布的一款全新模型，它专门在 Agentic 智能方面，进行了深度优化；在多个编程相关的基准测试中，表现结果全面领先国产的同类模型；此外，它的输入输出还做到了国产模型的最低价。

用直观的例子说明，在相同 Tokens 数量的任务下（0-32k 输入区间），Claude Sonnet 4.5 完成需要约 4.05 元，GLM-4.6 要 0.77 元，而 Doubao-Seed-Code 的成本是 0.34 元。

▲配合字节的 TRAE 编程产品，在 SWE-Bench 上的得分更高；以及使用成本更低

Doubao-Seed-Code 的亮点还包括，它支持最高 256K 的上下文长度，能应付一般的长代码文件。它也是国内第一个支持视觉理解能力的编程模型；通俗点讲，就是不用自己口头描述做什么，一张设计稿、截图，就能自动生成对应的内容。

模型提供的 API 调用，支持在 Claude Code 中使用，也对字节跳动自家的编程开发工具 TRAE，Cursor、Codex CLI、Cline 等主流的开发生态，实现了全面的兼容。

目前，Doubao-Seed-Code 可以在火山方舟大模型体验中心、TRAE 中国版直接使用，也可以透过平台的 API 调用。

▲ https://www.volcengine.com/experience/ark?model=doubao-seed-code-preview-251028

在 TRAE 中国版，还提供了 Kimi K2，GLM 4.6，以及 DeepSeek、Qwen 等常见国产编程模型。

▲ https://www.trae.cn/

我们也在火山引擎官网、TRAE 、以及 API 调用几种方式里，体验了这款全新的编程模型，不能说吊打 Claude，但是配合自身的编程开发环境、和超低的费用，很难不让人心动。

模型能力实测，一张草图生成一个项目

视觉理解是 Doubao-Seed-Code 的一大亮点，但其实从图片复制网页，甚至是在 AI 大语言模型流行之前，就已经有类似的应用。而多模态的能力，现在也基本上成为了每个模型的标配。

我们从网上找了一张手绘的网页布局图片，直接让它根据这张草图，生成对应的前端页面。

还原度还是很高的，复制代码拿过来直接用作自己的项目，或者再要它添加一些处理的逻辑，神笔马良的即视感。

除了这种照搬图片的内容，我们还找了一张大家熟知的游戏截图，Flappy Bird，但是截图里面就是几根柱子。上传截图并提问，你认识这个游戏吗？用一个单页的 HTML 实现它。

虽然简陋了一点，但是 Douban-Seed-Code 在深度思考的过程，一眼就看出来这是 Flappy Bird 的游戏。最后的实现，把小鸟直接换成了一个原点，但确实是一张图就能生成游戏。

火山方舟的模型体验中心更多是一种 Playground 的存在；Doubao-Seed-Code 的发布，直指当下火热的 AI 编程赛道。

字节也专门为 Doubao-Seed-Code 在 TRAE 中的表现进行过优化，与 TRAE 深度结合的豆包编程模型，在对应的编程基准测试中，甚至拿到了超过 Claude 4.5 Sonnet 的成绩。

和网页版处理不同，在本地使用，意味着我们的主动权更大。我们直接把过去几篇 APPSO 的文章放到项目文件夹，然后在 TRAE 里和模型对话，要它根据这些文件，帮我制作个人作品集。

在豆包编程模型的介绍资料里，我们看到字节用了一套大规模的 AI 强化学习系统，来完成智能体的学习训练。

  • 覆盖十万个不同环境的数据集，让 AI 见识各种复杂任务。
  • 不需要老师手把手的教，而是完全依靠端到端的强化学习，模型自己总结经验。

在 TRAE 中运行了一会儿了，就得到了最后的个人作品集网页，说实话总结得很不错，在精选文章那一部分，都是 AI 自动帮我配的图片。

除了直接使用，豆包编程模型还提供了 API 的方式，能够配置到 Claude Code 之类的工具中。

我们之前在介绍 Google 全家桶时，分享过 Gemini CLI（和 Claude Code 类似的命令行终端工具）的使用体验，基本上能减去我们找各种第三方工具的繁琐。

在火山引擎的官网，字节更是直接给出了完整的将 Doubao-Seed-Code 配置到 Claude Code 的详细步骤，我们只需要照着教程走，就能得到一个不会被断供的 Claude Code。

▲ https://console.volcengine.com/ark/region:ark+cn-beijing/model/detail?Id=doubao-seed-code

简单配置之后，我们就可以进入到 Claude Code 的页面，并且显示当前的模型时 doubao-sseed-code-preview-251028。

字节这波发 Cursor 平替 SOLO 模式，又发 Claude 4.5 平替 Doubao-Seed-Code，能看出来是真的很想把 AI 编程做到极致，毕竟这是现在的大热门。

有多热，代表性产品 Cursor 在最新一轮融资后，估值来到了 300 亿美元，并且它几乎可以确认，将是历史上最快达到 10 亿美元 ARR 的公司。

▲图表由 GPT-5.1 生成，显示这些公司从成立到实现 10 亿美元的 ARR，需要多长时间。图片来源：X@Yuchenj_UW

而前些天，柯林斯词典也宣布，把 Vibe Coding 作为 2025 年度词汇；这一年来，无论是不是学计算机专业的，多多少少都已经接触到了 AI 编程。

简单的「帮我生成一个贪吃蛇的游戏」、到复杂的大型项目管理，代码完全变成了向 AI，而更少面向开发者的语言。

这种趋势也在大多数的基础模型，把编程能力作为主要卖点的背景下，变得越来越流行。如果在去年问一个 AI 编程的用户，他会选择什么模型，毫不犹豫地说，一定是 Claude 3.5。

到了今年这个时候，Claude 断供看起来反而是倒逼了我们一把。国产的编程模型有了智谱的 GLM 4.6、阿里的 Qwen Coder、Minimax M2、月之暗面的 Kimi K2 Thinking，个个都榜上有名；今天又多了一个选择，Doubao-Seed-Code。

模型之外，工具的演变也没停下来，从只是生成代码然后预览，到现在 TRAE 要把软件开发一条龙全面服务到位。即便现在说 AI 编程，要全面取代程序员还不太可能，但让 AI 手搓一个微信，未来三五年说不定真的能做到。

#欢迎关注爱范儿官方微信公众号：爱范儿（微信号：ifanr），更多精彩内容第一时间为您奉上。

爱范儿 | 原文链接 · 查看评论 · 新浪微博


为什么Vue 3的计算属性能解决模板臃肿、性能优化和双向同步三大痛点？

✇掘金 前端
kknone

一、计算属性的基本使用

计算属性（Computed）是Vue 3中用于派生状态的核心API，它能将复杂的逻辑从模板中抽离，让代码更简洁、可维护。

1.1 为什么需要计算属性？

模板表达式（如{{ author.books.length > 0 ? 'Yes' : 'No' }}）适合简单逻辑，但如果逻辑复杂或需要重复使用，直接写在模板里会有两个问题：

  • 模板臃肿：大量逻辑会让模板难以阅读；
  • 代码冗余：同一逻辑重复写多次，维护成本高。

计算属性的作用就是将派生逻辑封装成“虚拟属性”，让模板只负责展示，逻辑交给计算属性处理。

1.2 Options API 中的计算属性

在Options API中，计算属性通过computed选项定义，它是一个对象，键是计算属性名，值是getter函数（用于计算值）。

示例：判断作者是否有出版书籍

export default {
  data() {
    return {
      author: {
        name: 'John Doe',
        books: ['Vue 2 - Advanced Guide', 'Vue 3 - Basic Guide', 'Vue 4 - The Mystery']
      }
    }
  },
  computed: {
    // 计算属性的getter函数
    publishedBooksMessage() {
      // this 指向组件实例，自动追踪author.books的变化
      return this.author.books.length > 0 ? 'Yes' : 'No'
    }
  }
}

模板中直接使用计算属性，和普通data属性一样：

<template>
  <p>Has published books:</p>
  <span>{{ publishedBooksMessage }}</span>
</template>

1.3 Composition API 中的计算属性（<script setup>）

在Composition API中，使用computed()函数创建计算属性，返回的是computed ref（可响应的引用类型）。

示例（与上面功能一致）：

<script setup>
import { reactive, computed } from 'vue'

// 响应式数据：作者信息
const author = reactive({
  name: 'John Doe',
  books: ['Vue 2 - Advanced Guide', 'Vue 3 - Basic Guide', 'Vue 4 - The Mystery']
})

// 计算属性：判断是否有书籍
const publishedBooksMessage = computed(() => {
  // 依赖author.books，自动追踪变化
  return author.books.length > 0 ? 'Yes' : 'No'
})
</script>

<template>
  <p>Has published books:</p>
  <span>{{ publishedBooksMessage }}</span> <!-- 自动解包，无需.value -->
</template>

注意：

  • computed()函数接收一个getter函数，返回的publishedBooksMessage是ComputedRef类型；
  • 在模板中，computed ref会自动解包（不用写.value）；
  • 在<script>中访问时，需要用.value（如publishedBooksMessage.value）。

二、计算属性的缓存机制：与方法的本质区别

计算属性和方法都能实现逻辑复用，但缓存机制是它们的核心区别。

2.1 缓存的意义：性能优化

计算属性的结果会基于依赖自动缓存——只有当依赖的响应式数据变化时，才会重新计算；否则直接返回缓存值。

而方法没有缓存，每次调用（如模板渲染、函数调用）都会重新执行逻辑。

往期文章归档
免费好用的热门在线工具

示例：对比计算属性和方法

// 计算属性：缓存结果
const expensiveComputed = computed(() => {
  console.log('计算属性执行了')
  return heavyCalculation() // 假设这是一个耗时操作
})

// 方法：无缓存
function expensiveMethod() {
  console.log('方法执行了')
  return heavyCalculation()
}
  • 当依赖不变时，多次访问expensiveComputed.value，只会打印一次“计算属性执行了”；
  • 多次调用expensiveMethod()，每次都会打印“方法执行了”。

2.2 依赖追踪：只更新必要的计算

Vue会自动追踪计算属性的依赖（即getter函数中用到的响应式数据），只有依赖变化时，计算属性才会重新计算。

反例：依赖非响应式数据

const now = computed(() => Date.now()) // Date.now()不是响应式数据

无论过多久，now.value都不会更新——因为Vue无法追踪Date.now()的变化。

三、可写计算属性：处理双向逻辑

默认情况下，计算属性是只读的（只有getter），但在某些场景下，我们需要通过计算属性反向修改源数据（如fullName同步firstName和lastName），这时可以用可写计算属性（同时定义getter和setter）。

3.1 场景需求：双向同步

比如，我们有firstName和lastName两个响应式数据，希望通过fullName（如“John Doe”）同时读取和修改它们：

  • 读取fullName时，返回firstName + ' ' + lastName；
  • 修改fullName时，将新值拆分成firstName和lastName。

3.2 可写计算属性的实现

可写计算属性需要同时定义get（读取逻辑）和set（修改逻辑）。

Options API 写法：

export default {
  data() {
    return {
      firstName: 'John',
      lastName: 'Doe'
    }
  },
  computed: {
    fullName: {
      // getter：组合firstName和lastName
      get() {
        return this.firstName + ' ' + this.lastName
      },
      // setter：拆分新值到firstName和lastName
      set(newValue) {
        [this.firstName, this.lastName] = newValue.split(' ')
      }
    }
  }
}

Composition API 写法：

<script setup>
import { ref, computed } from 'vue'

const firstName = ref('John')
const lastName = ref('Doe')

const fullName = computed({
  // getter：组合firstName和lastName
  get() {
    return firstName.value + ' ' + lastName.value
  },
  // setter：拆分新值到firstName和lastName
  set(newValue) {
    [firstName.value, lastName.value] = newValue.split(' ')
  }
})
</script>

使用示例：

// 修改fullName，会同步更新firstName和lastName
fullName.value = 'Jane Smith'
console.log(firstName.value) // Jane
console.log(lastName.value)  // Smith

四、获取计算属性的之前值

Vue 3.4新增了获取计算属性之前值的能力，通过computed()函数的previous参数实现。这在需要保留历史状态的场景中很有用（如“只能减小不能超过某个值”）。

4.1 应用场景：保留历史状态

比如，我们希望alwaysSmall始终返回count的值，但当count超过3时，保持之前的最大值（3）：

<script setup>
import { ref, computed } from 'vue'

const count = ref(2)
const alwaysSmall = computed((previous) => {
  if (count.value <= 3) {
    return count.value // 当count≤3时，返回当前值
  }
  return previous // 当count>3时，返回之前的value（最大是3）
})
</script>

效果：

  • 当count从2→3→4时，alwaysSmall.value依次是2→3→3；
  • 当count从4→2时，alwaysSmall.value变回2。

五、计算属性的最佳实践

为了避免踩坑，使用计算属性时需遵循以下规则：

5.1 保持 getter 无副作用

计算属性的getter应该是纯函数——只依赖输入计算输出，不修改任何外部状态（如修改其他响应式数据、发送请求、操作DOM）。

反例（错误写法）：

const badComputed = computed(() => {
  this.author.name = 'Jane' // 错误：修改了其他状态
  return this.author.books.length > 0 ? 'Yes' : 'No'
})

这样会导致逻辑混乱，因为getter的职责是计算值，而不是修改状态。修改状态的操作应该放在methods或watch中。

5.2 不要直接修改计算属性的值

计算属性是派生状态（由源数据计算而来），直接修改计算属性的值是没有意义的——因为它会被下一次计算覆盖。

反例（错误写法）：

// publishedBooksMessage是计算属性（无setter）
publishedBooksMessage.value = 'No' // 错误：只读属性

正确的做法是修改源数据（如author.books = []），让计算属性自动更新。

六、课后 Quiz：巩固你的理解

问题1：计算属性和方法的核心区别是什么？

答案：
计算属性基于依赖缓存，只有依赖变化时才重新计算；方法无缓存，每次调用都重新执行。
解析：缓存是计算属性的核心优势，适合需要重复使用且依赖稳定的逻辑（如过滤列表）；方法适合不需要缓存的场景（如事件处理）。

问题2：如何创建一个可写的计算属性？

答案：
通过同时定义get（读取逻辑）和set（修改逻辑）实现：

  • Options API：在computed选项中写{ get() {}, set(newValue) {} }；
  • Composition API：调用computed({ get() {}, set(newValue) {} })。
    示例：参考“三、可写计算属性”中的fullName例子。

问题3：为什么计算属性中使用Date.now()不会更新？

答案：
因为Date.now()不是响应式依赖，Vue无法追踪它的变化。计算属性只会在依赖的响应式数据变化时重新计算。
拓展：如果需要实时获取时间，应该用setInterval或watch，而不是计算属性。

七、常见报错及解决方案

报错1：计算属性返回undefined

原因：getter函数没有返回值（忘记写return）。
示例：

const badComputed = computed(() => {
  author.books.length > 0 ? 'Yes' : 'No' // 忘记return
})

解决：确保getter函数有return语句。

报错2：无法修改只读计算属性

报错信息：Set operation on key "xxx" failed: computed value is readonly
原因：尝试修改无setter的计算属性（默认是只读的）。
解决：

  • 如果需要修改，给计算属性添加setter（参考“三、可写计算属性”）；
  • 不要直接修改计算属性，改为修改源数据。

报错3：计算属性不随数据更新

原因：

  1. 依赖了非响应式数据（如普通变量，不是ref/reactive）；
  2. getter函数中没有用到响应式数据（即无依赖）。
    解决：
  • 将数据转为响应式（用ref或reactive包裹）；
  • 确保getter函数中用到了响应式数据。

参考链接

vuejs.org/guide/essen…

Vue响应式声明的API差异、底层原理与常见陷阱你都搞懂了吗

✇掘金 前端
kknone

一、Options API中的响应式声明与操作

Options API是Vue 2的经典写法，Vue 3保留了它的兼容性。在Options API中，响应式状态的核心是data选项。

1.1 用data选项声明响应式状态

data选项必须是一个返回对象的函数（避免组件复用时光享状态），Vue会将返回对象的所有顶级属性包裹进响应式系统。这些属性会被代理到组件实例（this）上，可通过this访问或修改：

export default {
  data() {
    return {
      count: 1, // 声明响应式属性count
      user: { name: 'Alice', age: 20 } // 嵌套对象也会被深层响应式处理
    }
  },
  mounted() {
    console.log(this.count) // 1（通过this访问响应式数据）
    this.count = 2 // 修改响应式数据，触发DOM更新
    this.user.age = 21 // 深层修改嵌套对象，同样触发更新
  }
}

关键注意事项：

  • 必须预声明所有属性：若后期通过this.newProp = 'new'添加属性，newProp不会是响应式的（因为Vue无法追踪未预声明的属性）。如需动态添加，可先在data中用null/undefined占位（如newProp: null）。
  • 避免覆盖this的内置属性：Vue用$（如this.$emit）和_（如this._uid）作为内置API的前缀，不要用这些字符开头命名data属性。

1.2 响应式代理与原始对象的区别

Vue 3用JavaScript Proxy实现响应式（取代Vue 2的Object.defineProperty）。代理对象与原始对象是不同的引用，

往期文章归档
免费好用的热门在线工具
修改原始对象不会触发响应式更新： 
export default {
  data() {
    return {
      someObject: {}
    }
  },
  mounted() {
    const newObject = {}
    this.someObject = newObject // 将代理指向newObject
    console.log(newObject === this.someObject) // false（this.someObject是代理）
    newObject.foo = 'bar' // 修改原始对象，不会触发DOM更新
    this.someObject.foo = 'bar' // 修改代理对象，触发更新
  }
}

结论：始终通过this访问响应式数据（即操作代理对象），而非原始对象。

二、Composition API中的响应式声明与操作

Composition API是Vue 3的推荐写法，更灵活、更适合复杂逻辑复用。核心API是ref和reactive。

2.1 ref()：包裹任意值的响应式容器

ref用于包裹基本类型（如number、string）或需要替换的对象，返回一个带value属性的响应式对象。

基本用法
<script setup>
import { ref } from 'vue'

// 声明ref：初始值0，count是一个ref对象
const count = ref(0)

// 修改ref的值：必须通过.value（JavaScript中）
function increment() {
  count.value++
}
</script>

<template>
  <!-- 模板中自动解包，不用写.value -->
  <button @click="increment">{{ count }}</button>
</template>
关键细节
  • .value的作用：Vue通过ref.value的getter/setter追踪响应式（getter时记录依赖，setter时触发更新）。
  • 自动解包场景：
    • 模板中的顶级ref（如上面的count）会自动解包；
    • 作为响应式对象的属性时（如const state = reactive({ count })，state.count会自动解包为count.value）。
  • 非自动解包场景：
    • 数组/集合中的ref（如const books = reactive([ref('Vue Guide')])，需用books[0].value访问）；
    • 嵌套对象中的ref（如const obj = { id: ref(1) }，模板中{{ obj.id + 1 }}不会解包，需解构const { id } = obj后使用{{ id + 1 }}）。

2.2 reactive()：让对象本身变响应式

reactive用于将对象类型（对象、数组、Map/Set）转换为响应式代理，无需value属性即可直接修改：

<script setup>
import { reactive } from 'vue'

// 声明reactive对象：state是响应式代理
const state = reactive({
  count: 0,
  user: { name: 'Bob' }
})

// 修改响应式数据：直接操作属性
function increment() {
  state.count++
  state.user.name = 'Charlie' // 深层修改嵌套对象
}
</script>

<template>
  <button @click="increment">{{ state.count }} - {{ state.user.name }}</button>
</template>
局限性与规避方法

reactive有3个关键局限：

  1. 不能包裹基本类型：reactive(1)无效，需用ref(1)；
  2. 不能替换整个对象：若state = reactive({ count: 1 })，替换state = { count: 2 }会丢失响应式（代理引用被切断），需用ref包裹对象（const state = ref({ count: 0 })，修改state.value = { count: 2 }）；
  3. 解构丢失响应式：const { count } = state会将count变成普通变量，修改count不会触发更新。需用toRefs将reactive对象转为ref集合： 
    import { reactive, toRefs } from 'vue'
const state = reactive({ count: 0 })
const { count } = toRefs(state) // count是ref，保留响应式
count.value++ // 触发更新

2.3 深层响应式与浅响应式

ref和reactive默认会深层递归处理所有嵌套对象（即修改嵌套属性也会触发响应式）：

const obj = ref({ nested: { count: 0 }, arr: ['foo'] })
obj.value.nested.count++ // 触发更新
obj.value.arr.push('bar') // 触发更新

若需优化性能（如大对象无需深层响应式），可使用：

  • shallowRef：仅追踪.value的变化（不处理嵌套对象）；
  • shallowReactive：仅追踪对象的顶级属性变化（不处理嵌套对象）。

三、DOM更新的时机与nextTick

Vue修改响应式数据后，DOM更新是异步的（缓冲到“下一个tick”，避免多次修改导致重复更新）。若需等待DOM更新完成后操作DOM，需用nextTick：

<script setup>
import { ref, nextTick } from 'vue'

const count = ref(0)

async function increment() {
  count.value++
  // 等待DOM更新完成
  await nextTick()
  // 此时可安全访问更新后的DOM
  console.log(document.querySelector('.count').textContent) // 输出1
}
</script>

<template>
  <span class="count">{{ count }}</span>
  <button @click="increment">Increment</button>
</template>

课后Quiz

1. 为什么在Composition API中修改ref的值需要用.value？

答案解析：
ref是一个包裹值的对象，Vue通过ref.value的getter/setter实现响应式：

  • getter：当访问ref.value时，Vue记录当前组件作为依赖；
  • setter：当修改ref.value时，Vue通知所有依赖组件重新渲染。
    模板中ref会自动解包（即隐式访问.value），但JavaScript中必须显式写.value。

2. 用reactive声明的对象，为什么不能直接替换整个引用？

答案解析：
reactive返回的是原始对象的代理，Vue的响应式追踪基于这个代理的属性访问。若替换整个对象（如state = { count: 1 }），新对象不是代理，Vue无法追踪其变化，导致DOM不更新。
解决方法：用ref包裹对象（const state = ref({ count: 0 })），修改state.value = { count: 1 }（ref.value的变化会被追踪）。

3. 修改响应式数据后，立即访问DOM得到旧值，如何解决？

答案解析：
Vue的DOM更新是异步缓冲的（批量处理所有状态变化，避免重复渲染）。需用nextTick等待DOM更新完成：

async function update() {
  count.value++
  await nextTick() // 等待下一个DOM更新周期
  // 此时DOM已更新
}

常见报错解决方案

报错1：修改数据后DOM不更新

  • 可能原因：
    1. 数据未在响应式系统中声明（如let count = 0，未用ref包裹）；
    2. 替换了reactive对象的整个引用（如state = { count: 1 }）；
    3. 修改了未预声明的属性（如Options API中this.newProp = 'new'）。
  • 解决方法：
    1. 用ref/reactive声明所有响应式数据；
    2. 用ref包裹需要替换的对象（修改ref.value）；
    3. 在data中预声明属性（如newProp: null）。

报错2：ref在模板中显示[object Object]

  • 可能原因：ref嵌套在对象中，且不是文本插值的最终值（如{{ object.id + 1 }}，object.id是ref）。
  • 解决方法：
    1. 解构ref为顶级属性（const { id } = object，然后{{ id + 1 }}）；
    2. 显式访问.value（不推荐，如{{ object.id.value + 1 }}）。

报错3：解构reactive对象后，修改数据不触发更新

  • 可能原因：解构会将reactive属性转为普通变量（如const { count } = state，count是普通number）。
  • 解决方法：用toRefs将reactive对象转为ref集合： 
    import { reactive, toRefs } from 'vue'
const state = reactive({ count: 0 })
const { count } = toRefs(state) // count是ref，保留响应式
count.value++ // 触发更新

参考链接：vuejs.org/guide/essen…

Vue3响应式系统的底层原理与实践要点你真的懂吗？

✇掘金 前端
kknone

一、响应式系统的核心概念

1.1 什么是响应式？

我们可以用生活中的恒温热水器类比Vue的响应式系统：当水温低于设定值时，热水器会自动加热；当水温过高时，会停止加热——状态变化触发自动反馈。Vue的响应式系统本质上也是如此：当JavaScript状态（如变量、对象属性）发生变化时，Vue会自动更新依赖该状态的UI或逻辑。

官网对响应式的定义非常明确：“Vue 的响应式系统会跟踪 JavaScript 状态并在其发生变化时触发更新。” 比如你有一个计数器变量count，当count从0变成1时，页面上显示count的地方会自动更新为1，无需手动操作DOM。

1.2 响应式的工作边界

不是所有JavaScript数据都会被Vue跟踪，响应式系统的工作边界是：

  • 用ref或reactive创建的变量（推荐方式）；
  • setup函数中返回的对象（Vue会自动将其转为响应式）；
  • 组件props（Vue会自动处理为响应式）。

简言之：只有被响应式系统“标记”过的数据，才会触发更新。比如直接声明的普通变量let count = 0，修改它不会触发UI更新——因为它没被响应式系统跟踪。

二、响应式系统的底层原理

2.1 从Object.defineProperty到Proxy

Vue2的响应式基于Object.defineProperty，但它有两个致命局限：

  1. 无法检测对象新增/删除属性：比如obj.newKey = 1不会触发更新；
  2. 无法检测数组索引/长度变化：比如arr[0] = 1或arr.length = 0不会触发更新。

Vue3用Proxy解决了这些问题。Proxy是ES6的新特性，能拦截对象的所有操作（get、set、delete、遍历等），相当于给对象套了一层“代理壳”，所有对对象的操作都会经过这层壳。

余下文章内容请点击跳转至 个人博客页面 或者 扫描二维码关注或者微信搜一搜：编程智域 前端至全栈交流与成长，阅读完整的文章：Vue3响应式系统的底层原理与实践要点你真的懂吗？

往期文章归档
免费好用的热门在线工具

举个简单的Proxy例子：

// 模拟Vue3的响应式代理
const reactiveObj = new Proxy({ name: 'Alice' }, {
  // 拦截“读取属性”操作
  get(target, key) {
    console.log(`读取了属性${key}`);
    return target[key]; // 返回原始值
  },
  // 拦截“修改属性”操作
  set(target, key, value) {
    console.log(`修改了属性${key}，新值是${value}`);
    target[key] = value;
    return true; // 表示修改成功
  }
});

// 测试
reactiveObj.name; // 输出：读取了属性name
reactiveObj.name = 'Bob'; // 输出：修改了属性name，新值是Bob

2.2 响应式的依赖追踪流程

Vue的响应式系统核心是**“依赖追踪”**——跟踪哪些组件/逻辑依赖了某个数据，当数据变化时，只通知这些依赖更新。流程如下（附流程图）：

flowchart LR
    A[用ref/reactive创建响应式对象] --> B[组件渲染时读取数据]
    B --> C[Proxy的get拦截器收集依赖]
    C --> D[数据变化触发set拦截器]
    D --> E[通知所有依赖更新]
    E --> F[重新渲染组件/执行watch回调]

流程拆解：

  1. 初始化：用ref或reactive将数据转为响应式对象（本质是Proxy）；
  2. 读取数据：组件渲染时，会读取响应式数据（比如{{ count }}），触发Proxy的get拦截器；
  3. 收集依赖：get拦截器会记录“当前正在渲染的组件”或“watch回调”作为依赖；
  4. 数据变化：当修改数据时（比如count.value++），触发Proxy的set拦截器；
  5. 通知更新：set拦截器会遍历该数据的所有依赖，触发组件重新渲染或回调执行。

2.3 ref与reactive的区别

Vue3提供了两个核心API创建响应式数据：ref和reactive，它们的区别如下：

特性 ref reactive
适用类型 基本类型（number、string等）、对象/数组 对象/数组（不能用于基本类型）
访问方式 需要.value（JS中），模板中自动解包 直接访问属性
嵌套对象处理 自动转为reactive 自动跟踪嵌套属性

示例代码：

import { ref, reactive } from 'vue';

// 1. 基本类型用ref
const count = ref(0);
console.log(count.value); // 输出：0（JS中需要.value）
count.value++; // 修改数据，触发更新

// 2. 对象用reactive
const user = reactive({ name: 'Alice', age: 20 });
user.age = 21; // 修改嵌套属性，触发更新

// 3. 对象用ref（也可以，内部会转为reactive）
const product = ref({ price: 100 });
product.value.price = 120; // 触发更新

注意：模板中使用ref不需要.value，Vue会自动解包：

<template>
  <p>{{ count }}</p> <!-- 正确，无需.count.value -->
</template>

三、响应式系统的实际应用

3.1 组件中的响应式数据

最常见的场景是组件内的状态管理。比如一个计数器组件：

<template>
  <div class="counter">
    <p>当前计数：{{ count }}</p>
    <button @click="increment">+1</button>
  </div>
</template>

<script setup>
// 1. 引入ref API
import { ref } from 'vue';

// 2. 创建响应式数据（初始值0）
const count = ref(0);

// 3. 点击事件：修改数据（JS中需要.value）
const increment = () => {
  count.value++; // 数据变化 → 自动更新UI
};
</script>

运行环境说明：

  • 需创建Vue3项目（推荐用Vite，更快）；
  • 步骤：
    1. 执行npm create vite@latest my-vue-app -- --template vue；
    2. 进入项目目录cd my-vue-app；
    3. 安装依赖npm install；
    4. 运行npm run dev，打开浏览器访问http://localhost:5173。

3.2 响应式数据的衍生：computed与watch

当需要基于响应式数据生成新值（如计算总价）或监听数据变化执行逻辑（如请求接口）时，用computed和watch。

3.2.1 computed（计算属性）

computed会缓存结果，只有依赖的数据变化时才重新计算，避免重复计算。示例：

<template>
  <p>原价：{{ price }}</p>
  <p>折扣价（9折）：{{ discountedPrice }}</p>
</template>

<script setup>
import { ref, computed } from 'vue';

const price = ref(100); // 原价
// 计算折扣价（依赖price）
const discountedPrice = computed(() => {
  return price.value * 0.9;
});
</script>

3.2.2 watch（侦听器）

watch会监听数据变化，执行自定义逻辑（如请求数据、打印日志）。示例：

<template>
  <input v-model="username" placeholder="输入用户名" />
</template>

<script setup>
import { ref, watch } from 'vue';

const username = ref('');

// 监听username变化
watch(username, (newVal, oldVal) => {
  console.log(`用户名从${oldVal}变成了${newVal}`);
  // 可以在这里发请求检查用户名是否存在
});
</script>

3.3 处理嵌套对象/数组的变化

Vue3的响应式系统能深度跟踪嵌套对象/数组的变化，无需手动处理。比如：

const shopCart = reactive({
  items: [
    { name: '手机', quantity: 1 },
    { name: '耳机', quantity: 2 }
  ]
});

// 修改数组中的嵌套属性 → 触发更新
shopCart.items[0].quantity = 2;

// 新增数组元素 → 触发更新
shopCart.items.push({ name: '充电头', quantity: 1 });

// 删除数组元素 → 触发更新
shopCart.items.splice(1, 1);

四、课后Quiz

来测试一下你掌握了多少！

问题1：为什么Vue3用Proxy而不是Object.defineProperty？

答案：
Proxy能解决Object.defineProperty的两个局限：

  1. 支持跟踪对象新增/删除属性；
  2. 支持跟踪数组索引/长度变化。 Proxy是更完整的对象拦截方案，能覆盖所有数据操作场景。

问题2：ref和reactive的核心区别是什么？

答案：

  • ref用于基本类型（如number、string）和对象，JS中需要.value访问；
  • reactive用于对象/数组，直接访问属性，不能用于基本类型。 ref的对象内部会转为reactive，所以两者都能跟踪嵌套属性变化。

问题3：如何让Vue跟踪对象的新增属性？

答案：
用reactive创建对象，直接新增属性即可：

const user = reactive({ name: 'Alice' });
user.age = 21; // 新增属性，触发更新

如果用ref创建对象，修改.value下的属性：

const user = ref({ name: 'Alice' });
user.value.age = 21; // 触发更新

五、常见报错及解决方案

报错1：Cannot read properties of undefined (reading 'value')

原因：JS中使用ref时忘记加.value，比如count++而不是count.value++。
解决：检查ref变量的使用，JS中必须加.value。
预防：记住“模板不用.value，JS用.value”。

报错2：Property 'xxx' was accessed during render but is not defined on instance.

原因：模板中用了未在setup中返回的变量，或变量名拼写错误。
解决：检查setup函数的返回值，确保所有模板变量都被返回；检查拼写。
预防：使用ESLint插件（如eslint-plugin-vue）自动检查模板变量。

报错3：Reactive object cannot be wrapped into a ref

原因：用ref包裹了一个已经是reactive的对象，比如ref(reactive({ name: 'Alice' }))。
解决：不要嵌套使用ref和reactive，直接用其中一个即可。
预防：明确ref和reactive的适用场景，避免重复包裹。

参考链接

Vue 3中reactive函数如何通过Proxy实现响应式？使用时要避开哪些误区？

✇掘金 前端
kknone

一、响应式对象的核心概念

在Vue 3中，响应式对象是指能自动追踪自身属性变化，并触发视图更新的特殊对象。它是Vue“数据驱动视图”核心特性的基石——当你修改响应式对象的属性时，依赖该属性的视图会自动重新渲染，无需手动操作DOM。

举个生活中的例子：响应式对象就像一个“带通知功能的快递箱”——当你往箱子里放新快递（修改属性），它会自动给你发消息（触发视图更新）；而普通对象则像普通快递箱，你放了快递也不会通知你，得自己时不时去看（手动更新DOM）。

二、reactive函数的基本用法

reactive是Vue 3提供的创建响应式对象的核心API，它接收一个对象或数组作为参数，返回一个包裹该对象的响应式Proxy实例。

1. 基础示例：计数器

先看一个最简单的组件，用reactive实现计数器功能：

<!-- src/components/Counter.vue -->
<template>
  <!-- 点击按钮时，修改state.count -->
  <button @click="increment">点击了{{ state.count }}次</button>
</template>

<script setup>
// 从Vue中导入reactive函数
import { reactive } from 'vue'

// 创建响应式对象：包含count属性
const state = reactive({ count: 0 })

// 点击事件处理函数：修改响应式对象的属性
function increment() {
  state.count++ // 修改属性，自动触发视图更新
}
</script>

运行步骤：

  • 初始化Vue项目（用Vite）：npm create vite@latest my-vue-app -- --template vue
  • 进入项目：cd my-vue-app
  • 安装依赖：npm install
  • 运行项目：npm run dev
  • 在浏览器中打开http://localhost:5173，点击按钮就能看到计数更新。

2. 关键说明

  • reactive的限制：只能处理对象或数组，不能处理原始类型（如number、string）。如果要让原始类型响应式，需要用ref（后续章节会讲）。
  • 直接修改属性有效：因为state是Proxy实例，修改它的属性会触发set陷阱（后面讲原理），从而更新视图。

三、reactive的实现原理：Proxy与响应式系统

Vue 3的响应式系统基于ES6 Proxy实现，这是它和Vue 2（用Object.defineProperty）的核心区别。

1. Proxy的作用

Proxy可以理解为“对象的代理人”——它会拦截对原始对象的所有操作（如属性访问、修改、删除等），并在这些操作发生时执行自定义逻辑。

对于reactive创建的对象，Vue会做两件事：

往期文章归档
免费好用的热门在线工具
  1. 收集依赖（Track）：当访问Proxy对象的属性时（如state.count），Vue会记录“谁在使用这个属性”（比如组件的渲染函数）。
  2. 触发更新（Trigger）：当修改Proxy对象的属性时（如state.count++），Vue会通知所有依赖该属性的“使用者”，让它们重新执行（比如重新渲染组件）。

2. 响应式流程流程图

graph TD
  A[原始对象（如{ count: 0 }）] --> B[reactive函数]
  B --> C[Proxy对象（响应式代理）]
  C --> D[访问属性（如state.count）]
  D --> E[收集依赖（Track）：记录使用该属性的组件]
  C --> F[修改属性（如state.count++）]
  F --> G[触发更新（Trigger）：通知依赖组件重新渲染]
  G --> H[视图更新]

四、reactive的应用场景

reactive最适合处理复杂的响应式对象，比如：

1. 表单状态管理

表单数据通常是多个字段的组合，用reactive可以统一管理：

<template>
  <form @submit.prevent="handleSubmit">
    <input v-model="formState.username" placeholder="用户名" />
    <input v-model="formState.password" type="password" placeholder="密码" />
    <button type="submit">登录</button>
  </form>
</template>

<script setup>
import { reactive } from 'vue'

// 用reactive管理表单状态
const formState = reactive({
  username: '',
  password: ''
})

function handleSubmit() {
  console.log('提交的表单数据：', formState)
  // 在这里发送请求到后端...
}
</script>

2. 购物车状态管理

购物车包含商品列表、总金额等多个属性，用reactive可以轻松维护：

import { reactive } from 'vue'

const cart = reactive({
  items: [], // 商品列表，每个item包含id、name、price、quantity
  total: 0   // 总金额
})

// 添加商品到购物车
function addToCart(product) {
  const existingItem = cart.items.find(item => item.id === product.id)
  if (existingItem) {
    existingItem.quantity++ // 修改嵌套属性，仍能触发更新
  } else {
    cart.items.push({ ...product, quantity: 1 })
  }
  // 更新总金额
  cart.total = cart.items.reduce((sum, item) => sum + item.price * item.quantity, 0)
}

五、使用reactive的注意事项

1. 不能解构reactive对象（否则失去响应式）

错误示例：

const state = reactive({ count: 0 })
const { count } = state // 解构得到的count是原始值，不是响应式的
count++ // 修改count不会触发视图更新

原因：解构会把Proxy对象的属性“提取”成原始值，失去了Proxy的代理能力。

解决方案：用toRefs或toRef将属性转换为响应式的ref：

import { reactive, toRefs } from 'vue'

const state = reactive({ count: 0 })
const { count } = toRefs(state) // count变成ref对象，需用.count.value访问
count.value++ // 仍能触发视图更新

2. 不能直接替换reactive对象

错误示例：

let state = reactive({ count: 0 })
state = { count: 1 } // 错误！state不再是Proxy对象，失去响应式

原因：reactive返回的是Proxy实例，直接替换state会让它指向一个普通对象，不再具备响应式能力。

解决方案：修改对象的属性而非替换整个对象：

// 正确做法1：直接修改属性
state.count = 1

// 正确做法2：用Object.assign合并对象
Object.assign(state, { count: 1 })

3. 嵌套对象会自动响应式

reactive是深度代理的，嵌套对象的属性也会被Proxy包裹。比如：

const state = reactive({
  user: { name: 'Alice' } // 嵌套对象
})
state.user.name = 'Bob' // 修改嵌套属性，仍能触发视图更新

六、课后Quiz

问题1：为什么解构reactive对象后修改属性不会触发视图更新？如何解决？

答案：

  • 原因：解构会将Proxy对象的属性提取为原始值（如state.count是0，解构后count就是0），失去了Proxy的代理能力，修改原始值不会触发set陷阱。
  • 解决方案：用toRefs将reactive对象的所有属性转换为ref，或用toRef转换单个属性。

问题2：reactive函数和ref函数的核心区别是什么？分别适用于什么场景？

答案：

  • reactive：
    • 只能处理对象/数组；
    • 不需要.value访问属性；
    • 适合管理复杂的多属性状态（如表单、购物车）。
  • ref：
    • 可以处理原始类型（如number、string）或单个值；
    • 需要用.value访问属性（在<script>中）；
    • 适合管理简单的单个响应式值（如计数器的count、开关的isOpen）。

七、常见报错与解决方案

1. 错误：reactive传入原始类型导致无效

报错场景：

const num = reactive(1) // 错误：reactive只能处理对象/数组
num.value++ // 无效果，因为num不是Proxy对象

原因：reactive的参数必须是对象或数组，传入原始类型会返回原值（非响应式）。

解决方案：用ref处理原始类型：

import { ref } from 'vue'
const num = ref(1)
num.value++ // 正确，视图会更新

2. 错误：修改解构后的属性不更新视图

报错场景：

const state = reactive({ count: 0 })
const { count } = state
count++ // 视图不更新

原因：解构失去响应式（见第五章注意事项1）。

解决方案：用toRefs或toRef：

const { count } = toRefs(state)
count.value++ // 正确

3. 错误：直接替换reactive对象导致失去响应式

报错场景：

let state = reactive({ count: 0 })
state = { count: 1 } // 错误：state变成普通对象

原因：state不再指向Proxy实例，修改它的属性不会触发更新。

解决方案：修改对象的属性而非替换整个对象：

state.count = 1 // 正确
// 或合并对象
Object.assign(state, { count: 1 })

参考链接

❌