Функция Reactive во Vue: как это работает

[rudinandrey]

Кстати, реактивные функции, используемые во Vue, можно использовать отдельно от всего фреймворка.

import { reactive } from "vue";

const items = reactive({
	store1: 3,
	store2: 4
})

let totalCount = 0;

const effect = () => (totalCount = items.store1 + items.store2)

effect()
console.log(totalCount)
items.store2 = 10
console.log(totalCount)

Тогда почему этот код возвращает 7 и 7 ?

[nin-jin]

Потому что у вас там опечатка в коде, давайте я поправлю:

const store1 = new Reactive("store1", () => 3);
const store2 = new Reactive("store2", () => 4);

let totalCount = new Reactive("totalCount", () => store1.sync() + store2.sync() );

console.log(totalCount.sync()); // 7
store2.put(10);
console.log(totalCount.sync()); // 13

[RAX7]

import { reactive, computed } from "vue";

const items = reactive({
	store1: 3,
	store2: 4
});

const totalCount = computed(() => items.store1 + items.store2);
console.log(totalCount.value);
items.store2 = 10;
console.log(totalCount.value);

[profyan]

В set функции название переменной «_target» следует сменить на «target».

[RAX7]

set: (target, key, value, receiver) => {
  const oldVal = target[key];
  const newVal = Reflect.set(target, key, value, receiver);
  oldVal !== newVal && trigger(target, key);
  target[key] = value;

  return newVal;
},

Reflect.set возвращает вовсе не новое значение https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Reflect/set#return_value

По моему set должен выглядеть так:

set: (target, key, value, receiver) => {
  const oldVal = target[key];
  oldVal !== value && trigger(target, key);
  return Reflect.set(target, key, value, receiver);
},

[Drm-a]

да, кажется вы правы

[Spokik]

Окей, а если мы хотим это дело превратить в red(), нам нужно как-то оповестить всех пользователей о том, что объект изменился. Чего делать с этим ?

Я, очевидно, не глубоко знаю vue. Насколько я понимаю effect () — своего рода computed()

Видимо действительно стоит почитать на досуге.

[Drm-a]

Про это будет следующая статья)

[GuardCat]

Возможно, в vanilla js проксирование объекта позволит эмулировать подобный механизм?

[Drm-a]

Если честно не очень понял Ваш вопрос.
Во-первых, примеры кода и так написаны на vanila.js, во-вторых, они используют проксирование))

В третьих, вы можете импортировать только реактивные функции из вью и использовать в vamila проекте

[serjJS]

Тоесть я внутри methods могу писать реактивную функуию нативно? И в computed ничего не писать?

[Drm-a]

Ну если вы работаете с реактивным объектом, то да