vue 3深拷贝 route 报错 Avoid app logic that relies on enumerating keys on a component instance. The keys

报错方式

 	const route = useRoute()
    let { query: routeQuery } = JSON.parse(JSON.stringify(route))
   // runtime-core.esm-bundler.js:198 [Vue warn]: Avoid app logic that relies on enumerating keys on a component instance. The keys will be empty in production mode to avoid performance overhead.

报错翻译:避免应用程序逻辑依赖于在组件实例上枚举键。在生产模式下,键值将为空,以避免性能开销
报错原因 可能是深拷贝 js对象序列化(json字符串) 导致route 的一些值 序列化错误 比如route里面的函数 与undefined丢失;

解决

深拷贝具体内容 不深拷贝route整个对象;

  let routeQuery = JSON.parse(JSON.stringify(route.query))
  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
The error message "There is a chart instance already initialized on the DOM" in Vue 3 with TypeScript usually occurs when you try to initialize an ECharts chart on a DOM element that already has a chart instance attached to it. To fix this issue, you need to ensure that you are not initializing multiple instances of ECharts on the same DOM element. Here are a few possible solutions: 1. Use the `dispose` method: Before reinitializing the chart, make sure to dispose of the existing instance using the `dispose` method. This will remove the previous chart and its event listeners from the DOM. ```typescript import { ref, onBeforeUnmount } from "vue"; import * as echarts from "echarts"; export default { setup() { const chartRef = ref<HTMLDivElement | null>(null); let chartInstance: echarts.ECharts | null = null; const initData = () => { if (chartRef.value && chartInstance) { // Dispose of the existing chart instance chartInstance.dispose(); } // Initialize the new chart instance chartInstance = echarts.init(chartRef.value); // ... }; onBeforeUnmount(() => { if (chartInstance) { chartInstance.dispose(); chartInstance = null; } }); return { chartRef, initData, }; }, }; ``` 2. Use a flag to track initialization: Instead of creating a new chart instance every time, you can use a flag to track whether the chart has already been initialized. Only initialize the chart if it hasn't been initialized yet. ```typescript import { ref, onMounted } from "vue"; import * as echarts from "echarts"; export default { setup() { const chartRef = ref<HTMLDivElement | null>(null); let isChartInitialized = false; const initData = () => { if (!isChartInitialized && chartRef.value) { // Initialize the chart instance const chartInstance = echarts.init(chartRef.value); isChartInitialized = true; // ... } }; onMounted(initData); return { chartRef, initData, }; }, }; ``` Ensure that you are calling the `initData` method at the appropriate time, such as when the component is mounted or when the data that the chart depends on changes. I hope this helps! Let me know if you have any further questions.
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值