Блог

У меня была сложная структура данных, и 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}
}
  

Затем определите компонент Vue, который отображает список класса A. Создайте список в привязке к жизненному циклу монтирования и убедитесь, что НЕ связываете экземпляр ClassB обратно с ClassA. Убедитесь, что следующее отображает необработанное отображение каждого элемента 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 работает с подобными объектами)?