build后无法获取echart的实例 about vue-echarts HOT 13 CLOSED

复现代码输出不了你截图的日志吧。

from vue-echarts.

复现代码输出不了你截图的日志吧。

我仓库的代码复现不了吗

from vue-echarts.

复现代码输出不了你截图的日志吧。

两次截图分别是打包前和打包后a的值

b的值是正常的，我就没截图

from vue-echarts.

我仓库的代码复现不了吗

复现不了，你检查一下吧

from vue-echarts.

我仓库的代码复现不了吗

复现不了，你检查一下吧

可以复现啊

我准备了个在线的
https://stackblitz.com/~/github.com/Preyou/vue-project?file=src/App.vue

from vue-echarts.

我仓库的代码复现不了吗

复现不了，你检查一下吧

可以复现啊

我准备了个在线的 https://stackblitz.com/~/github.com/Preyou/vue-project?file=src/App.vue

直接运行 pnpm run preview
再看控制台就可以发现，没有正确的获取实例

from vue-echarts.

mount 以前 ref 的 value 应该是 undefined 吧，你这么写如果能取到值那肯定是因为热更新导致的。这在生产环境肯定不对啊。

from vue-echarts.

mount 以前 ref 的 value 应该是 undefined 吧，你这么写如果能取到值那肯定是因为热更新导致的。这在生产环境肯定不对啊。

我这么写是没问题的，我打印的是ref而不是ref.value。而且就算是把log写在onMounted里，一样不行。

from vue-echarts.

我试了一下在 preview 下取到组件实例是没有问题的，你不要看 console 打出来的内容，你试试实际调用实例上的方法看看。

from vue-echarts.

我试了一下在 preview 下取到组件实例是没有问题的，你不要看 console 打出来的内容，你试试实际调用实例上的方法看看。

确实是可以调用的，但是属性不可枚举还是有点问题的，在实现组件继承时，为了连expose一起继承，我可能会这么写

const chart = reactive({})

defineExpose(chart)

onMounted(()=>{
  Object.assign(chart, chartInstance.value)
})

这里当然可以改成

defineExpose({
  chart: chartInstance
})

但是这样写的话，每次调用包装后的组件都得多访问一层chart

包装前

const echart = ref()

onMounted(()=>{
   echart.value.dispatchAction({})
})

包装后

const echart = ref()

onMounted(()=>{
   echart.value.chart.dispatchAction({})
})

但是我包装组件的目的主要是为了全局覆写一些默认参数（比如theme），避免每个调用的地方都要再写一遍。并不想改变原有组件的用法，以便其他开发人员可以在仅参考原有文档的基础上就能使用包装后的组件。

而且我不太清楚为何这个组件打包后所有的实例属性都不可枚举了，这使得某些依赖迭代器的用法都会在打包前后的表现不一致。比如for in、...obj、Object.assign、Object.keys、Object.values、Object.entries等，都将无法在打包后正确拿到属性。

from vue-echarts.

这个和 Vue ECharts 无关的，你搞一个只包含 Vue 的项目试一下，也是这样的。

from vue-echarts.

这个和 Vue ECharts 无关的，你搞一个只包含 Vue 的项目试一下，也是这样的。

我在示例里不是还打印了一个变量b吗，这个b就是正常可枚举的。

from vue-echarts.

你搞一个不是通过 defineExpose 定义的实例。

from vue-echarts.