当前位置：首页 > news >正文

Vue 3 入门教程 3- 响应式系统

news 2025/8/2 1:52:42

一、响应式系统核心原理

Vue 3 的响应式系统是其核心特性之一，它能够自动追踪数据的变化，并在数据改变时更新相关的视图。其核心原理基于 ES6 的 Proxy 对象。

Proxy 可以创建一个对象的代理，从而实现对目标对象的属性读取、赋值、删除等操作的拦截和自定义处理。当我们通过代理对象访问或修改属性时，Vue 能够感知到这些操作，进而触发相应的依赖更新，实现视图与数据的自动同步。

与 Vue 2 基于 Object.defineProperty 的响应式实现相比，Proxy 具有以下优势：

能直接监听对象而非属性，可对对象的所有属性进行拦截。

能监听数组的变化，包括数组的 push、pop、splice 等方法操作。

能监听属性的添加和删除。

二、创建响应式数据

在 Vue 3 中，主要通过 ref 和 reactive 来创建响应式数据，它们适用于不同的数据类型场景。

2.1 ref

ref 主要用于创建基本类型（String、Number、Boolean 等）的响应式数据，也可以用于创建对象类型的响应式数据。当用于对象类型时，它内部会自动将其转换为 reactive 代理对象。

使用案例

<template><div><p>当前计数：{{ count }}</p><button @click="increaseCount">增加计数</button><p>用户名：{{ user.name }}</p><button @click="changeName">修改用户名</button></div>
</template><script setup>
import { ref } from 'vue'// 创建基本类型响应式数据
const count = ref(0)// 创建对象类型响应式数据
const user = ref({name: '张三',age: 20
})// 修改基本类型响应式数据
const increaseCount = () => {// 访问 ref 创建的响应式数据需要通过 .value 属性count.value++
}// 修改对象类型响应式数据
const changeName = () => {// 对于对象类型，修改其属性时，即使是通过 ref 创建的，也可以直接修改属性值（内部已转为 reactive）user.value.name = '李四'
}
</script>

在上述案例中，我们使用 ref 创建了基本类型的 count 和对象类型的 user。当点击按钮修改数据时，视图会自动更新。需要注意的是，在脚本中访问和修改 ref 创建的响应式数据时，要通过 .value 属性，而在模板中可以直接使用变量名，无需 .value。

2.2 reactive

reactive 用于创建对象或数组类型的响应式数据，它返回一个响应式的代理对象。

使用案例

<template><div><p>学生信息：</p><p>姓名：{{ student.name }}</p><p>年龄：{{ student.age }}</p><p>课程：{{ student.courses.join(', ') }}</p><button @click="updateStudent">更新学生信息</button></div>
</template><script setup>
import { reactive } from 'vue'// 创建对象类型响应式数据
const student = reactive({name: '王五',age: 18,courses: ['数学', '语文']
})// 修改响应式数据
const updateStudent = () => {student.age = 19student.courses.push('英语')
}
</script>

在这个案例中，使用 reactive 创建了 student 对象，包含姓名、年龄和课程数组。当调用 updateStudent 方法修改年龄和课程时，视图会实时更新。与 ref 不同，reactive 创建的响应式对象在访问和修改属性时，无需使用 .value。