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

掘金前端

作者 kknone

2025年11月9日 09:27

一、计算属性的基本使用

计算属性（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：计算属性不随数据更新

原因：

依赖了非响应式数据（如普通变量，不是ref/reactive）；
getter函数中没有用到响应式数据（即无依赖）。
解决：

将数据转为响应式（用ref或reactive包裹）；
确保getter函数中用到了响应式数据。

参考链接

vuejs.org/guide/essen…

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

掘金前端

作者 kknone

2025年11月8日 12:36

一、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个关键局限：

不能包裹基本类型：reactive(1)无效，需用ref(1)；
不能替换整个对象：若state = reactive({ count: 1 })，替换state = { count: 2 }会丢失响应式（代理引用被切断），需用ref包裹对象（const state = ref({ count: 0 })，修改state.value = { count: 2 }）；

解构丢失响应式：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

2025年11月5日 11:57

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

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，但它有两个致命局限：

无法检测对象新增/删除属性：比如obj.newKey = 1不会触发更新；
无法检测数组索引/长度变化：比如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回调]

流程拆解：

初始化：用ref或reactive将数据转为响应式对象（本质是Proxy）；
读取数据：组件渲染时，会读取响应式数据（比如{{ count }}），触发Proxy的get拦截器；
收集依赖：get拦截器会记录“当前正在渲染的组件”或“watch回调”作为依赖；
数据变化：当修改数据时（比如count.value++），触发Proxy的set拦截器；
通知更新：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的两个局限：

支持跟踪对象新增/删除属性；
支持跟踪数组索引/长度变化。 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的适用场景，避免重复包裹。

参考链接

Vue3响应式基础：vuejs.org/guide/essen…
ref API文档：vuejs.org/api/reactiv…
reactive API文档：vuejs.org/api/reactiv…

掘金前端
Vue 3中reactive函数如何通过Proxy实现响应式？使用时要避开哪些误区？kknone
2025年11月6日 10:29

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

掘金前端

作者 kknone

2025年11月6日 10:29

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

在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会做两件事：

往期文章归档

免费好用的热门在线工具

收集依赖（Track）：当访问Proxy对象的属性时（如state.count），Vue会记录“谁在使用这个属性”（比如组件的渲染函数）。
触发更新（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 })

参考链接

Vue 3响应式基础：vuejs.org/guide/essen…
reactive API文档：vuejs.org/api/reactiv…
toRefs API文档：vuejs.org/api/reactiv…

普通视图

一、计算属性的基本使用

1.1 为什么需要计算属性？

1.2 Options API 中的计算属性

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

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

2.1 缓存的意义：性能优化

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

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

3.1 场景需求：双向同步

3.2 可写计算属性的实现

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

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

五、计算属性的最佳实践

5.1 保持 getter 无副作用

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

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

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

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

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

七、常见报错及解决方案

报错1：计算属性返回undefined

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

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

参考链接

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

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

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

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

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

基本用法

关键细节

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

局限性与规避方法

2.3 深层响应式与浅响应式

三、DOM更新的时机与nextTick

课后Quiz

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

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

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

常见报错解决方案

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

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

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

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

1.1 什么是响应式？

1.2 响应式的工作边界

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

2.1 从Object.defineProperty到Proxy

2.2 响应式的依赖追踪流程

流程拆解：

2.3 ref与reactive的区别

示例代码：

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

3.1 组件中的响应式数据

运行环境说明：

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

3.2.1 computed（计算属性）

3.2.2 watch（侦听器）

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

四、课后Quiz

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

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

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

五、常见报错及解决方案

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

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

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

参考链接

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

二、reactive函数的基本用法

1. 基础示例：计数器

2. 关键说明

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

1. Proxy的作用

2. 响应式流程流程图

四、reactive的应用场景

1. 表单状态管理

2. 购物车状态管理

五、使用reactive的注意事项

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

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

报错1：计算属性返回`undefined`

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

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

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

三、DOM更新的时机与`nextTick`

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

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

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

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

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

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

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

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

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