Vue 的响应式更改数据类型

Question

我有一个 Vue.js 2 组件，其中一个数据成员应该是从 Array 扩展的自定义类 (Vector) 的数组。但是，当我将数组分配给数据成员时，数组的项不再是向量，而是普通数组。

这里是一个例子：https://codesandbox.io/embed/nervous-tu-7en2q?fontsize=14&hidenavigation=1&theme=dark

主要部分：

vector.js

export default class Vector extends Array {
  /** Creat a vector from all arguments. */
  constructor(...args) { ... }

  get x() {
    return this[0];
  }
  get y() {
    return this[1];
  }
};

export const square = [
  new Vector(0, 0),
  new Vector(1, 1),
]

组件：

<template>
  <div id="app">
    {{ title }}
    ({{ square[0][0] }}, {{ square[0][1] }})
    ({{ square[1].x }}, {{ square[1].y }})
  </div>
</template>

<script>
import { square } from './vector.js';

export default {
  name: "HelloWorld",
  props: {
    msg: String
  },
  data() {
    return {
      square,
      title: 'hello'
    }
  },
  mounted() {
    console.log(this.square)
  }
};
</script>

如果您查看控制台输出，您会看到正方形现在是两个数组的数组，而不是两个向量的数组：

(2) [数组(2)，数组(2)]

问题：

1. 这应该发生吗？如果是，为什么？
2. 可以预防吗？一种选择是通过将其移出数据部分来防止它具有反应性，但这当然会扼杀良好的反应性部分。

Answer 1

我不确定是什么问题，但我尝试使用不同的模式重写几乎相同的内容，您能否检查这是否解决了您的问题？如果不是希望另一种方法可以为您提供更多线索。

基本上，就我所见，您每次创建vector 时都会得到一个2 numbers array，您是否希望它是其他类型的？

这是我的重写：

vector.js

const vector = (x, y) => ({
    values: [x, y],
    setX(newValue) {
      this.values[0] = newValue
      return this
    },
    setY(newValue) {
      this.values[1] = newValue
      return this
    },
    getX() {
      return this.values[0]
    },
    getY() {
      return this.values[1]
    }
})

export default vector

export const square = [vector(0, 0).values, vector(1,1).values];

<script>
import vector, { square } from "./vector.js";

export default {
  name: "HelloWorld",
  props: {
    msg: String,
  },
  data() {
    return {
      square,
      vector: vector(1, 2).values,
      title: "Corners",
    };
  },
  mounted() {
    console.log('square', this.square);
    console.log('vector', this.vector);
  },
};
</script>