快速理解 Vue3 响应式系统
发布于2026-03-21 13:01 阅读20次
Vue3响应式系统采用ES6 Proxy重写，性能大幅提升。本文介绍reactive和ref的区别、computed计算属性和watch监听器的用法，帮助开发者快速掌握Vue3响应式核心概念。
# 快速理解 Vue3 响应式系统
Vue3 的响应式系统完全重写，性能提升明显。
## reactive vs ref
Vue3 提供两种创建响应式数据的方式：
```javascript
import { reactive, ref } from "vue";
// ref：适合基本类型
const count = ref(0);
count.value++; // 需要 .value
// reactive：适合对象
const state = reactive({
name: "Tom",
age: 20
});
state.name = "Jerry"; // 直接使用
```
## 核心原理
Vue3 使用 ES6 Proxy 实现响应式：
```javascript
const original = { name: "test" };
const proxy = new Proxy(original, {
get(target, key) {
console.log("读取:", key);
return target[key];
},
set(target, key, value) {
console.log("修改:", key, value);
target[key] = value;
return true;
}
});
```
## computed 计算属性
自动缓存结果，只有依赖变化时才重新计算：
```javascript
const firstName = ref("Zhang");
const lastName = ref("San");
const fullName = computed(() => {
return firstName.value + " " + lastName.value;
});
```
## watch 监听器
监听数据变化并执行副作用：
```javascript
watch(count, (newVal, oldVal) => {
console.log("变化了:", newVal, oldVal);
});
// 监听多个数据
watch([a, b], ([newA, newB]) => {
console.log("a 或 b 变化了");
});
```
## 总结
1. 基本类型用 ref，对象用 reactive
2. computed 用于计算属性，自动缓存
3. watch 用于监听数据变化
4. 理解 Proxy 是掌握响应式的关键
2
0
文章点评
暂无任何评论