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都会遇到这样的问题

最后,有用点个赞吧? 👀

相关推荐
customer0814 分钟前
【开源免费】基于SpringBoot+Vue.JS医疗报销系统(JAVA毕业设计)
java·vue.js·spring boot·后端·开源
道不尽世间的沧桑17 分钟前
第9篇:插槽(Slots)的使用
前端·javascript·vue.js
B站计算机毕业设计超人18 分钟前
计算机毕业设计SpringBoot+Vue.jst房屋租赁系统(源码+LW文档+PPT+讲解)
vue.js·spring boot·后端·eclipse·intellij-idea·mybatis·课程设计
bin915320 分钟前
DeepSeek 助力 Vue 开发:打造丝滑的滑块(Slider)
前端·javascript·vue.js·前端框架·ecmascript·deepseek
uhakadotcom37 分钟前
最新发布的Tailwind CSS v4.0提供了什么新能力?
前端
杰九1 小时前
【环境配置】maven,mysql,node.js,vue的快速配置与上手
java·vue.js·spring boot·mysql·node.js·maven
GISer_Jing1 小时前
Node.js中如何修改全局变量的几种方式
前端·javascript·node.js
秋意钟1 小时前
Element UI日期选择器默认显示1970年解决方案
前端·javascript·vue.js·elementui
bramble1 小时前
Windows使用Trae全程提问来创建一个彩色贪吃蛇游戏,可以设置速度并查看游戏记录。
前端·程序员·trae
我命由我123452 小时前
微信小程序 - 自定义实现分页功能
前端·微信小程序·小程序·前端框架·html·html5·js