响应式 = 数据变了，页面自动跟着变，不用手动操作 DOM

原生js是没有响应式的

let name = "小明"
// 页面渲染 name
name = "小红"
// 数据改了，页面不会自动刷新，要自己重新赋值改DOM

Vue 响应式：

只要你改数据，模板视图自动更新，不用你操作任何 DOM。

vue2和vue3的响应式核心区别

Vue2：Object.defineProperty

• 只能监听已存在的属性

• 监听不了：新增属性、删除属性、数组下标、数组长度

• 所以 Vue2 才有 this.$set 强制更新

Vue3：Proxy（核心）

Proxy 是 ES6 原生 API：

直接劫持整个对象 / 数组，不是劫持单个属性。

能监听：

• 对象新增属性

• 对象删除属性

• 数组下标修改

• 数组长度修改

• 嵌套深层对象

vue3两个核心的响应式API：ref、reactive

ref和reactive的区别

ref的本质是把值包在value对象中、

const count = ref(0)
// 等价于
const count = {
  value: 0 
}

reactive

reactive 直接代理整个对象，本身就是对象，直接点属性就行。

1. ref

作用：把基本类型（字符串、数字、布尔）变成响应式

底层原理：

把值包装成一个对象，内部有 value 属性，再被 Proxy 劫持。

<script setup>
import { ref } from 'vue'
// 基本类型
const count = ref(0)
​
// 脚本里修改必须 .value
count.value = 10
</script>
​
<template>
  <!-- 模板里不用 .value -->
  {{ count }}
</template>

简单类型 → 用 ref

脚本里 .value

模板里直接写变量名

2、reactive

作用：把 对象 / 数组 变成响应式

不能放基本类型，适合复杂结构。

不用 .value，直接点属性。

<script setup>
import { reactive } from 'vue'
​
const user = reactive({
  name: '张三',
  age: 18
})
​
// 直接改，不用 .value
user.name = '李四'
</script>
​
<template>
  {{ user.name }}
</template>

易错点

1、在代码中结构会丢失响应式

const user = reactive({ name:'张三' })
// 直接解构，失去响应式
const { name } = user 
// 改了页面不更新
name = '李四'

toRefs 保留响应式

import { reactive, toRefs } from 'vue'
const user = reactive({ name:'张三' })
// 解构后每一项还是 ref 响应式
const { name } = toRefs(user)
// 脚本里要 .value
name.value = '李四'

原理：

toRefs 把 reactive 对象的每一个属性都转成 ref，解构后依然是响应式。

2、computed 计算属性（衍生响应式）

依赖别的响应式数据，自动缓存，依赖变它自动变

const count = ref(0)
const double = computed(() => count.value * 2)

• 不能直接随意赋值（默认只读）

• 依赖变化自动重新计算

• 有缓存，多次渲染只算一次