Почему ref не требует обращение к value?

Question

[Кирилл Щевелев]

Здравствуйте.
Вот есть псевдокод на котором хочу понять, что происходит не так:

import { Ref, ref } from 'vue';

class Enemy {
  x = ref(0);
  y = ref(0);
  hp = ref(100);
}

class Enemies {
  enemies: Ref<Array<Enemy>> = ref([]);
  addEnemy = () => {
    this.enemies.value.push(new Enemy());
  };
  moveEnemies = () => {
    this.enemies.value.forEach((enemy) => {
      if (enemy.hp > 0) {
        enemy.x += 1;
      }
    });
  };
}
const enemies = new Enemies();
enemies.addEnemy();
enemies.moveEnemies();

Почему при переборе объектов в методе moveEnemies через forEach, когда я обращаюсь к enemy.x, не требуется указывать value? Вот так:

this.enemies.value.forEach((enemy) => {
	if (enemy.hp.value > 0) {
	  enemy.x.value += 1;
	}
});

Код без value работает, но TS ругается на типы, поскольку enemy.x является Ref и нельзя ему присвоить новое число или выполнять операции математические.

И если допустим проверку if (enemy.hp > 0) я могу пройти, добавив защиту через toValue(enemy.hp), то вот с присваиванием enemy.x — не могу.

this.enemies.value.forEach((enemy) => {
	if (toValue(enemy.hp) > 0) {
	  enemy.x += 1;
	}
});

Конечно, можно добавить gett'er к объекту enemy, либо просто метод, записывающий в x.value значение. Но хочется разобраться, что я упускаю

Comments

[Антон Антон]

Мне кажется дело в механизме прокси vue, когда оно при присваивании ref внутрь ref убирает один уровень. Я бы делал не

class Enemy {
  x = ref(0);
  y = ref(0);
  hp = ref(100);
}

а

class Enemy {
  x = 0;
  y = 0;
  hp = 100;
}

и ref(new Enemy()) для одного объекта и this.enemies.value.push(new Enemy()) (как и сейчас) для массива.

[Кирилл Щевелев]

Антон Антон,
Значит мне и массив enemies в ref и элементы в ref, а сами свойства нет:

class Enemy {
	x = 0;
	y = 0;
	hp = 0;
}  
class Enemies {
	enemies: Ref<Array<Ref<Enemy>>> = ref([]);
	addEnemy = () => {
	  this.enemies.value.push(ref(new Enemy()));
	};
}

Такс, протестирую сейчас, будет ли после всего этого обновляться в DOM дереве. Рисую игрушку на div'ах, не в canvas.

Спасибо!)

[Антон Антон]

Кирилл Щевелев, this.enemies.value.push(new Enemy()), реактивность и так будет

[Aetae]

Почему - отписали выше.
А что делать - нахрен сраные ref.

class Enemy {
  x = 0;
  y = 0;
  hp = 0;
  constructor() {
    return reactive(this)
  }
}  
class Enemies {
  constructor() {
    return reactive(this)
  }
  enemies: Array<Enemy> = [];
  addEnemy() {
    this.enemies.push(new Enemy());
  };
  moveEnemies() {
    this.enemies.forEach((enemy) => {
      if (enemy.hp > 0) {
        enemy.x += 1;
      }
    });
  };
}
const enemies = new Enemies();
enemies.addEnemy();
enemies.moveEnemies();

Можно вынести в простой декоратор, чтоб руками не фигачить:

function Reactive<TBase extends new (...args: any[]) => any>(Base: TBase) {
  return class extends Base {
    constructor(...args: any[]) {
      super(...args);
      return reactive(this);
    }
  };
}

@Reactive
class Enemy {
  x = 0;
  y = 0;
  hp = 0;
}

или, лучше, в базовый класс:

class Reactive {
  constructor() {
    return reactive(this)
  }
}


class Enemy extends Reactive {
  x = 0;
  y = 0;
  hp = 0;
}