shallowRef 和 ref 的区别

shallowRefref 都是 Vue 3 的响应式 API,它们的主要区别在于响应式的深度

ref

  • 深度响应式:会自动递归地将所有嵌套属性都转为响应式
  • 适用于:需要完全响应式的复杂对象
javascript 复制代码
import { ref } from 'vue'

const state = ref({
  user: {
    name: 'John',
    address: {
      city: 'New York',
      street: '123 Main St'
    }
  }
})

// 所有这些修改都会触发响应式更新
state.value.user.name = 'Jane'           // 触发更新
state.value.user.address.city = 'Boston' // 触发更新

shallowRef

  • 浅层响应式 :只对 .value 本身的变化进行响应,不递归转换嵌套属性
  • 适用于:大型对象或不需要深度响应的场景,性能更好
javascript 复制代码
import { shallowRef } from 'vue'

const state = shallowRef({
  user: {
    name: 'John',
    address: {
      city: 'New York',
      street: '123 Main St'
    }
  }
})

// 只有这些会触发响应式更新
state.value = { ... }  // 直接替换整个值,触发更新

// 这些不会触发响应式更新!
state.value.user.name = 'Jane'           // 不触发更新
state.value.user.address.city = 'Boston' // 不触发更新

使用场景对比

ref 适用场景:

javascript 复制代码
// 需要深度响应的表单数据
const formData = ref({
  personalInfo: {
    name: '',
    age: ''
  },
  preferences: {
    theme: 'light',
    notifications: true
  }
})

shallowRef 适用场景:

javascript 复制代码
// 大型不可变数据,只需要整体替换
const largeData = shallowRef({ /* 大量数据 */ })

// 第三方库实例,不需要响应式
const mapInstance = shallowRef(null)

// 性能敏感场景
const heavyObject = shallowRef({ /* 复杂嵌套对象 */ })

强制触发更新

如果需要让 shallowRef 的嵌套属性变化触发更新:

javascript 复制代码
const state = shallowRef({ count: 0 })

// 方法1:整体替换
state.value = { ...state.value, count: 1 }

// 方法2:使用 triggerRef
import { triggerRef } from 'vue'
state.value.count = 1
triggerRef(state) // 手动触发更新

总结

  • ref:深度响应式,适合需要完全响应性的数据
  • shallowRef:浅层响应式,性能更好,适合大型对象或只需要整体替换的场景

选择哪个取决于你对数据响应式深度的需求和性能考虑。

相关推荐
前端伪大叔2 小时前
第15篇:Freqtrade策略不跑、跑错、跑飞?那可能是这几个参数没配好
前端·javascript·后端
星光不问赶路人2 小时前
理解 package.json imports:一次配置,跨环境自由切换
前端·npm·node.js
非专业程序员2 小时前
从0到1自定义文字排版引擎:原理篇
前端·ios
3Katrina2 小时前
GitLab 从入门到上手:新手必看的基础操作 + 企业级应用指南
前端
圆肖3 小时前
[陇剑杯 2021]简单日志分析(问3)
前端·经验分享·github
王嘉俊9254 小时前
Django 入门:快速构建 Python Web 应用的强大框架
前端·后端·python·django·web·开发·入门
IT_陈寒5 小时前
Redis性能翻倍的5个冷门技巧,90%的开发者从不知道第3点!
前端·人工智能·后端
WebGIS开发5 小时前
新中地三维GIS开发智慧城市效果和应用场景
前端·人工智能·gis·智慧城市·webgis
鱼樱前端6 小时前
uni-app快速入门章法(一)
前端·uni-app