Vue3 双层ref问题不更新视图?其实是很基础的问题

🏠某知识点

有无其他知识 或 前置知识

这篇文章应该可以更好的理解这次问题->对象的引用和复制

📶简介

有无背景

在一次Echart的使用时候,我更新数据的时候图表没更新

❓为什么说这个?

情景复现

简述

我在关键的数据里有一个引用外界数据的过程,恰恰这个外界数据是ref定义的 然而就是这个数据导致我视图不更新了,但是打印的话还是正确更改了数据 所以问题就是dataArr身上了。先看代码🔽

代码

javascript 复制代码
const dataValue = ref<number[]>([])
  const dataArr = ref([
  {
    value: dataValue.value,// 引用上边定义的ref
  },
])
//echart配置 🔽
const update = (selectValue:string) => {
  chart.setOptions({
    ...其他配置,
    series: [
      {
        type: 'radar',
        symbolSize: 3,
        symbol: 'circle',
        data: dataArr.value, //这里引用第二个ref
        areaStyle: {
          color: '#d4dbf2',
          opacity: 0.5,
        },
      })
}
const handleValue = () => { // 更新数据函数
  if (dataValue.value.length >= 4) {
    dataValue.value = []
  }
  data.value.map(item => {
    dataValue.value.push(item.value) //在这儿去更新第一个ref
  })
}
watchEffect(() => {
  // watchEffect-> 更新数据 重新加载echart图表
  data.value = props.slelectData
  handleValue()
  update(props.selectValue)
})

✅我的做法

大体逻辑

起初,我认为是深层嵌套或者复杂数据类型的问题,我选择枚举法

第一步

我写了个demo测试,如下所示:我点击按钮让 ref1 改变为about,查看ref2和ref3的视图和值是否更改

javascript 复制代码
// Js
const ref1 = ref<string>('home')
const ref2 = ref<{ x: string }>({
  x: ref1.value
})
const ref3 = ref<{ y: string }[]>([
  { y: ref1.value }
])
const handleChangeRef = () => {
  console.log('点击了按钮改变数据->')
  ref1.value = 'about'

  console.log('ref2->', ref2.value)
  console.log('ref3->', ref3.value)
}
    // dom
    <div>ref1: {ref1.value}</div>
    <div>ref2的x属性: {ref2.value.x}</div>
    <div>ref3: {ref3.value[0].y}</div>
    <button onClick={handleChangeRef}>点击改变为about</button>

测试结果-> ref1更改成功、ref2和ref3视图和数据均未改变 所以复杂数据类型是不行的 在这里,ref2 的属性x 确实引用了ref1.value 的当前值。但是,ref2 本身是一个独立的ref 对象,它只在初始化时获取了ref1.value 的值。它不会自动跟踪ref1 的变化。

第二步

测试简单数据类型

javascript 复制代码
const ref4 = ref<string>(ref1.value)
const handleChangeRef = () => {
  console.log('点击了按钮改变数据->')
  ref1.value = 'about'

  console.log('ref2->', ref2.value)
  console.log('ref3->', ref3.value)
  console.log('ref4->', ref4.value)
}

测试结果->简单数据类型也不行 ref4 的值是从ref1.value 直接赋值的,而不是引用ref1 本身。因此,当您更改ref1 时,ref4 不会自动更新,因为它只是获取了ref1.value 的当前值。

枚举结果就出来了:不是复杂类型的问题那么就是使用的问题了

第三步

解决问题-> 使用计算属性或者watch来定义不会产生这样的问题

javascript 复制代码
const ref2 = computed(() => {
  return {
    x: ref1.value
  }
})

🎦结论

回顾描述与评价

这个问题(对象的引用和复制),我想我以前一定经常看,但实际遇到,还是没有想起来。 说明自身的经验不足,纸上谈兵是没有用的。 对自己的反思......


具体的知识(对象的引用和复制)可以在开头看到地址,可以回顾一下 不论是Vue还是React都会遇到这样的问题

最后,有用点个赞吧? 👀

相关推荐
3Katrina1 分钟前
前端面试之防抖节流(二)
前端·javascript·面试
前端进阶者7 分钟前
天地图编辑支持删除编辑点
前端·javascript
江号软件分享16 分钟前
无接触服务的关键:二维码生成识别技术详解
前端
江号软件分享17 分钟前
如何利用取色器实现跨平台色彩一致性
前端
灰海21 分钟前
封装WebSocket
前端·网络·websocket·网络协议·vue
前端小巷子31 分钟前
深入理解TCP协议
前端·javascript·面试
万少32 分钟前
鸿蒙外包的十大生存法则
前端·后端·面试
顽疲1 小时前
从零用java实现 小红书 springboot vue uniapp(13)模仿抖音视频切换
java·vue.js·spring boot
开开心心就好1 小时前
电脑息屏工具,一键黑屏超方便
开发语言·javascript·电脑·scala·erlang·perl
江号软件分享1 小时前
有效保障隐私,如何安全地擦除电脑上的敏感数据
前端