Vue 3 响应式系统深度解析
发布于2026-03-22 00:35 阅读16次
# Vue 3 响应式系统深度解析
## 什么是响应式系统？
Vue 3 的响应式系统是其核心特性之一，通过 ES6 Proxy 实现了对数据变化的自动追踪和视图更新。
## 核心 API
### ref
用于创建基础类型的响应式数据：
```javascript
import { ref } from vue
const count = ref(0)
console.log(count.value) // 0
count.value++
console.log(count.value) // 1
```
### reactive
用于创建对象类型的响应式数据：
```javascript
import { reactive } from vue
const state = reactive({
name: "Vue",
version: 3
})
console.log(state.name) // Vue
```
## Computed 和 Watch
### 计算属性
```javascript
import { ref, computed } from vue
const firstName = ref("John")
const lastName = ref("Doe")
const fullName = computed(() => {
return firstName.value + " " + lastName.value
})
```
### 监听器
```javascript
import { ref, watch } from vue
const count = ref(0)
watch(count, (newVal, oldVal) => {
console.log(`count changed from ${oldVal} to ${newVal}`)
})
```
## 总结
Vue 3 的响应式系统提供了优雅的数据绑定方案，ref 和 reactive 适用于不同场景，computed 和 watch 则处理复杂的计算和监听需求。
1
0
文章点评
暂无任何评论