Question

我有一个复杂的数据结构，Vue很好地处理了它。然后我对其进行了重构，突然似乎什么也没有用。我验证了数据结构是否正确组装，但没有任何显示。 Vue没有报告任何错误，也没有任何显示。

几个小时后，我发现当数据结构包含循环引用时，Vue渲染系统无法正常工作。为了验证，我定义了两个类A和B。每个类都可以引用另一个。

classA.js

export default class classA {
  constructor(name) {
    this.name = name
    this.refB = undefined
  }
  get name() {return this._name}
  set name(n) { this._name= n}
  get type() {return 'classA'}
  get refB() {return this._refB}
  set refB(n) { this._refB= n}
}

classB.js

export default class classB {
  constructor(name) {
    this.name = name
    this.refA = undefined
  }
  get name() {return this._name}
  set name(n) { this._name= n}
  get type() {return 'classB'}
  get refA() {return this._refA}
  set refA(n) { this._refA= n}
}

接下来定义一个显示类A列表的Vue组件。在安装生命周期挂钩中构造该列表，并确保不要将类B的实例链接回类A。验证以下内容是否显示了classAList的每个元素的原始显示

<template lang="pug">
   div Circular References
      div ClassAList length: {{classAlist.length}}
      div(v-for="cA in classAlist")
         div {{cA}}
</template>

<script>
import ClassA from '../classA'
import ClassB from '../classB'
export default {
  data () {
    return {
      classAlist: []
    }
  },
  mounted: function () {
    let a = new ClassA('a1')
    let b = new ClassB('b1')
    a.refB = b
    // Uncomment the next line to create a circular reference in the       
    // data structure. Immediately, once this next line establishes the
    // circular reference the Vue render system fails, silently
    // b.refA = a
    this.classAlist.push(a)
    console.log('Console listing the classA list ', this.classAlist)
  }
}
</script>

检查控制台，查看阵列是否按预期构造。现在，取消注释将B实例链接回A实例的代码行。控制台将继续显示该数组是按预期构造的，但是Vue渲染系统不喜欢循环引用。

有解决方法吗？有没有办法让Vue显示一些错误消息。（例如，像JSON.stringfy这样的对象）？

Vue不呈现数据

0 个答案: