Vue响应式数据详解-CSDN博客

本文链接：https://blog.csdn.net/linanran1027/article/details/147563240

Vue的响应式系统是其核心特性之一，它能够自动追踪数据变化并更新视图，以下是Vue响应式数据的全局解析：

1. 响应式基础

Vue 2 的响应式实现
Vue 2 使用Object.defineProperty()实现响应式：

// 简化的响应式实现
function defineReactive(obj, key) {
	let value = obj[key]
	Object.defineProperty(obj, key, {
		get() {
			console.log(`读取 ${key}: ${value}`)
			return value
		},
		set(newVal) {
			console.log(`设置 ${key}: ${newVal}`)
			value = newVal
			// 触发视图更新
		}
	}
}

Vue 3 的响应式实现
Vue 3 改用Proxy:

const reactive = (target) => {
	return new Proxy(target, {
		get(target, key) {
 			console.log(`读取 ${key}`)
      		return Reflect.get(target, key)		
      	},
      	set(target, key, value) {
	      console.log(`设置 ${key}: ${value}`)
	      return Reflect.set(target, key, value)
	    }
	})
}

2. Vue 2 中的响应式 API

data 选项

export default {
  data() {
    return {
      message: 'Hello Vue!',  // 响应式数据
      user: {
        name: 'John',        // 嵌套对象也是响应式的
        age: 30
      },
      items: ['a', 'b']     // 数组也是响应式的
    }
  }
}

Vue.set/this.$set
用于动态添加响应式属性：

this.$set(this.user, 'gender', 'male')
// 等同于
Vue.set(this.user, 'gender', 'male')

Vue.delete / this.$delete
用于删除响应式属性：

this.$delete(this.user, 'age')

3.Vue 3中的响应式API

reactive
创建响应式对象：

import { reactive } from 'vue'
const state = reactive({
	count: 0,
	user: {
		name: 'Alice'
	}
})

ref
创建响应式基本类型值：

import { ref } from 'vue'
const count = ref(0)
console.log(count.value) // 访问值
count.value++           // 修改值

import { reactive, toRefs } from 'vue'

const state = reactive({
	count: 0,
	name: 'Vue'
})
const { count, name } = toRefs(state)

4. 响应式原理对比

特性	Vue2	Vue3
实现方式	Object.defineProperty	Proxy
数组响应式	需要特殊处理	原生支持
新增属性响应式	需要Vue.set	自动支持
性能	一般	更好
嵌套对象	递归转换	惰性转换

5.响应式数据注意事项

常见问题

对象新增属性（Vue 2）：

// 错误方式（非响应式）
this.user.newProp = 'value';

// 正确方式
this.$set(this.user, 'newProp', 'value')

数组变化检测（Vue 2）：

// 这些方法会触发视图更新
this.items.push('new')
this.items.pop()
this.items.splice(0, 1)

// 这些不会
this.items[0] = 'new'       // 错误
this.items.length = 0       // 错误

异步更新队列：

this.count++
console.log(this.$el.textContext) // 旧值
this.$nextTick(() => {
	console.log(this.$el.textContext)
})

6. 响应式进阶

自定义响应式数据

// Vue 2
const observableData = Vue.observable({
	sharedState: 'Value'
})

// Vue3
import { reactive } from 'vue'

const store = reactive({
	state: {
		count: 0
	},
	increment() {
		this.state.count++
	}
})

性能优化

冻结大数据

this.largeData = Object.freeze(bigData) // 标记为不可变

避免大型响应式结构

// 不好的做法
this.hugeArray = reactive(veryLargeArray)

// 更好的做法
this.paginatedData = reactive(veryLargeArray.slice(0, 100))

使用 shallowRef/shallowReactive（Vue 3）：

import { shallowRef, shallowReactive } from 'vue'

const shallowObj = shallowReactive({ nested: { data: 1 }}) // 只跟踪顶层
const shallowValue = shallowRef({ data: 1 }) // 不深度跟踪

7. 响应式工具函数

Vue 3 特有

import { isRef, isReactive, isReadonly, isProxy, toRaw, markRaw } from 'vue'
const count = ref(0)
console.log(isRef(count))

const obj = reactive({})
console.log(isReactive(obj)) // true