Как создать не реактивные данные?

Question

[Ваня]

Все данные в data (vue 3) являются реактивными. Но, если на странице имеется работа с данными, от которых ничего не зависит до определенного момента. Пользователь изменяет их как хочет, а уже потом по кнопке мы что-то делаем. Следовательно их изменение тригерит перерендер или проверка на его изменение, происходит лишняя работа. Как создать не реактивные данные? Вне export default { data: ....}, внутри каким-то способом, или не имеет значения что есть лишняя работа. Как лучше делать. Поисковик выдает много всего, возможно я что-то понимаю, и то, что хочу сделать, не норма

Answer 1

[0xD34F]

markRaw

Comments

[Ваня]

Я правильно понял?

...
data: function () {
    return {
      home: markRaw({ age: 100, street: "street" }),
    };
}

Answer 2

[GrayHorse]

Берешь и создаешь обычным способом, без использования ref, reactive и т.д.:

const a = [1, 2, 3];

Также toRaw, чтобы получить оригинальный объект из реактивного:

const a = [1, 2, 3];
const r = ref(a);
const b = toRaw(r.value);

Изменения a и/или b не будут вызывать рендер, а изменения r.value — будут.

Хотя если использовать markRaw над a, то даже r.value перестанет быть реативным.

Поисковик выдает много всего

Две ссылки:
https://vuejs.org/api/reactivity-core.html
https://vuejs.org/api/reactivity-advanced.html

Answer 3

[madismad]

Если пишешь на options API, то можно просто положить во Vue instance, типа
export default { someConstant: 1, data: {...} }
и обращаться к ней через this.$options.someConstant.
Если пишешь на composition API, то объявляешь обычным const и передаёшь в компонент через return в setup'e