Подобъект в свойстве Vue теряет методы из прототипа

Question

Я использую Vue для отображения (между прочим) шестиугольной сетки. Я использую Honeycomb lib для представления его в памяти. Он предоставляет объект Grid, который содержит фактические данные и множество методов для управления ими (включая все методы типа Array для удобства).

Я попытался передать его как свойство моему компоненту Vue

@Component
export default class TileMap extends Vue {
@Prop() private grid!: Grid;

но все методы потеряны в моем Vue компоненте

• они находятся в прототипе при создании объекта Grid
• они не в прототипе при использовании свойства Grid в моем компоненте

Ожидается ли это? Стоит ли избегать свойств для объектов со свойствами?

Answer 1

К сожалению

Объект должен быть простым: собственные объекты, такие как объекты API браузера и свойства прототипа, игнорируются. Практическое правило заключается в том, что данные должны быть просто данными - не рекомендуется наблюдать объекты с их собственным поведением с состоянием.

источник

Я не знаю Для этого сценария нет подходящего обходного пути.

Хранить вещи в объекте окна?

Обернуть логи сетки c в каком-либо сервисе с внутренним состоянием?

Или завернуть сетку в функцию, а затем передать ее ребенку как реквизит?

Последний работает удивительно

import { defineGrid, Grid, GridFactory } from 'honeycomb-grid'
import Test from './Test.vue'
import { Vue, Component, Prop, Provide, ProvideReactive } from "vue-property-decorator";

@Component({
    components : { Test }
})
export default class App extends Vue {
    @Provide() private gridFunc: () => Grid = null;

    mounted() {
        const grid = defineGrid().rectangle({ width: 4, height: 4 });
        this.gridFunc = () => grid;
    }
}

import { defineGrid, Grid, GridFactory } from 'honeycomb-grid'
import { Vue, Component, ProvideReactive, Prop, Watch } from "vue-property-decorator";

@Component({})
export default class Test extends Vue {
    @Prop() private gridFunc!: () => Grid<any>;

    @Watch('gridFunc')
    onGridChange(val: string, oldVal: string) {
        console.log(this.gridFunc());
    }
}