Vue父组件访问子组件Vanilla类实例触发递归错误的排查

我来帮你分析这个问题的根源，以及给出可行的解决方案：

为什么会出现"too much recursion"错误？ #

这个问题的核心在于Vue的响应式系统对对象的深度遍历机制。当你把包含第三方类实例（siblingAInstance）的newOptions赋值给data中的siblingBOptions时，Vue会自动尝试将这个对象转为响应式——它会递归遍历对象的所有属性，为每个属性添加依赖追踪。

但第三方Vanilla JS类的实例（比如你的ComponentA）内部通常会存在循环引用：比如实例可能引用了它挂载的DOM元素，而DOM元素又通过某种方式反向引用了实例；或者类本身的属性结构里就有指向自身的引用。这种循环引用会让Vue的递归遍历陷入无限循环，最终触发栈溢出错误。

而你提到基本数据类型没问题，是因为基本类型（字符串、数字等）不是复杂对象，Vue不需要递归遍历它们的内部属性，自然不会触发递归问题。

解决方案 #

根据你的Vue版本（从代码看是Vue 2），可以用以下几种方式解决：

方案1：将siblingBOptions移出data，直接挂载到组件实例上 #

Vue只会对data返回的对象中的属性做响应式处理。如果把siblingBOptions直接赋值给组件实例（而非data），Vue就不会尝试对它做响应式转换，也就不会触发递归遍历：

data() {
  return {
    siblingAData: [....], // array of objects
    siblingAOptions: { axes: {}, height: "50px", },
    siblingBData: [...], // array of objects
    // 移除data中的siblingBOptions
  }
},
mounted() {
  const siblingAInstance = this.$refs.siblingARef.classInstance;
  // 直接赋值给this，而非data属性
  this.siblingBOptions = {
    legend: {
      external: {
        reference: siblingAInstance,
      },
    },
  };
},
template: `
  <SiblingAComponent ref="siblingARef" :data="siblingAData" :options="siblingAOptions"/>
  <SiblingBComponent v-if="siblingBData && siblingBOptions" :data="siblingBData" :options="siblingBOptions"/>
`

方案2：用Object.freeze()冻结包含类实例的对象 #

如果siblingBOptions后续不需要修改，可以用Object.freeze()冻结整个对象。Vue会跳过对冻结对象的响应式转换（因为冻结对象的属性无法被修改，不需要依赖追踪）：

mounted() {
  const siblingAInstance = this.$refs.siblingARef.classInstance;
  const newOptions = Object.freeze({
    legend: {
      external: {
        reference: siblingAInstance,
      },
    },
  });
  this.siblingBOptions = newOptions;
}

方案3（Vue 3专属）：用markRaw标记类实例为非响应式 #

如果你的项目是Vue 3，可以使用Vue提供的markRaw方法，直接标记第三方类实例，让Vue明确知道不需要对它做响应式处理：

import { markRaw } from 'vue';

// ...
mounted() {
  // 标记实例为非响应式
  const siblingAInstance = markRaw(this.$refs.siblingARef.classInstance);
  const newOptions = {
    legend: {
      external: {
        reference: siblingAInstance,
      },
    },
  };
  this.siblingBOptions = newOptions;
}

额外注意事项 #

虽然通过ref获取组件内部的类实例在Angular/React中是可行的，但在Vue里这其实是非推荐的封装破环做法。如果后续有优化空间，建议考虑通过组件的emit事件让子组件主动暴露需要的实例，而非直接访问内部状态——不过在第三方库的限制下，上面的方案已经能解决你的问题。

另外，你代码里有个小笔误：this.siblingBOptions = legendExternal;应该是this.siblingBOptions = newOptions;，记得修正哦。

内容的提问来源于stack exchange，提问作者Carmen Tan