深入解析Vue3中ref与reactive的区别及源码实现

深入解析Vue3中ref与reactive的区别及源码实现

前言

Vue3带来了全新的响应式系统,其中refreactive是最常用的两个API。本文将从基础使用、核心区别到源码实现,由浅入深地分析这两个API。

一、基础使用

1. ref

javascript 复制代码
import { ref } from vue

const count = ref(0)
console.log(count.value) // 0
count.value++

2. reactive

javascript 复制代码
import { reactive } from vue

const state = reactive({ count: 0 })
console.log(state.count) // 0
state.count++

二、核心区别

1. 数据类型

  • ref可以包装任意值类型(原始值、对象)
  • reactive只能处理对象类型

2. 访问方式

  • ref需要通过.value访问
  • reactive直接访问属性

3. 解构行为

  • ref解构后仍保持响应性
  • reactive解构后会丢失响应性

4. 性能考量

  • ref更适合独立的基本类型值
  • reactive更适合复杂对象

三、源码实现解析

1. ref实现原理

typescript 复制代码
// packages/reactivity/src/ref.ts
class RefImpl<T> {
  private _value: T
  private _rawValue: T
  
  public dep?: Dep = undefined
  public readonly __v_isRef = true

  constructor(value: T) {
    this._rawValue = value
    this._value = convert(value)
  }

  get value() {
    trackRefValue(this)
    return this._value
  }

  set value(newVal) {
    newVal = convert(newVal)
    if (hasChanged(newVal, this._rawValue)) {
      this._rawValue = newVal
      this._value = newVal
      triggerRefValue(this)
    }
  }
}

2. reactive实现原理

typescript 复制代码
// packages/reactivity/src/reactive.ts
function reactive(target: object) {
  if (isReadonly(target)) {
    return target
  }
  return createReactiveObject(
    target,
    false,
    mutableHandlers,
    mutableCollectionHandlers
  )
}

function createReactiveObject(
  target: Target,
  isReadonly: boolean,
  baseHandlers: ProxyHandler<any>,
  collectionHandlers: ProxyHandler<any>
) {
  // 使用Proxy进行代理
  const proxy = new Proxy(
    target,
    targetType === TargetType.COLLECTION ? collectionHandlers : baseHandlers
  )
  proxyMap.set(target, proxy)
  return proxy
}

四、最佳实践

  1. 基本类型优先使用ref
  2. 复杂对象使用reactive
  3. 组合使用时注意解构问题
  4. 大型项目考虑使用toRefs保持响应性

五、总结

refreactive都是Vue3响应式系统的核心,理解它们的区别和实现原理,能帮助我们更好地使用Vue3开发应用。

相关推荐
拳打南山敬老院6 分钟前
从零构建一个插件系统(四)插件的缓存
javascript·架构
Sobeit6 分钟前
ES2025 颠覆性 JS 黑科技新特性详解
前端
new_abc13 分钟前
net-snmp添加自定义mib树
服务器·前端·javascript
前端梭哈攻城狮19 分钟前
dify二开示例
前端·后端·python
该用户已不存在22 分钟前
Node.js 真的取代了PHP吗?
前端·后端·node.js
ze_juejin31 分钟前
JavaScript 的事件循环(Event Loop)机制
前端
前端缘梦35 分钟前
从源码到dist:拆解Webpack如何完成前端工程的"基因编译"
前端·webpack
热爱运维的小七40 分钟前
中型企业如何用 RUM 技术破解地理分布式用户体验难题?从指标监测到优化实操
前端·网站响应速度·地域访问
程序猿阿伟44 分钟前
《从点击到共鸣:论坛前端如何用交互细节编织用户体验》
前端·ux
樱花开了几轉44 分钟前
React中的合成事件解释和理解
前端·javascript·react.js