Как сделать переменную не реактивной в Vue

В заметке описано как отключить реактивность у пременной при работе с Vue. Актуально для версии 2, для Vue 3 не тестировал.

Сделать переменную не реактивной может потребоваться для того, чтобы произвести некоторые изменения над копией существующего объекта. Простая операция копирования становится сложной из-за реактивности, так как все изменения в копии применяются и к оригиналу. Чтобы справится с этим поведением есть несколько ухищрений, которые описанны в этой заметке.

Сделать объект не реактивным

let noReativeVar = Object.assign({}, this.myReativeVar);
// Или
let noReativeVar = JSON.parse(JSON.stringify(this.myReativeVar));

Нюанс. Метод JSON.stringify может выдавать ошибку, если в объекте есть функции-конструкторы, которые ссылкаются, грубо говоря, на сам корневой объект.

TypeError: Converting circular structure to JSON --> starting at object with constructor...

Кстати, заметил неприятный нюанс, при при котором не получается избавится от реактивности через Object.assign для того объекта, который выдает эту ошибку. Пришлось по-другом решать задачу. Как именно? По сути писать костыль и оборачивать вложенные элементы в Object.assign. Было грустно, но работало корректно.

Сделать массив не реактивным

Для массивов с объектами дело обстоит чуть сложнее. Синтаксис позволяет выполнить операцию Object.assign([], this.noReativeArray), но реактивность у нового массива останется. Поэтом придется пройтись циклом по массиву:

let noReativeArray = [];
for(let i = 0; i < this.steps.length; i++) {
  noReativeArray.push( Object.assign({}, this.steps[i]) );
}

Пример в CodeSandbox

Инструменты по теме:

  • deepmerge — легковеснвый инструмент для слияния объектов. Некоторые рекомендуют его как альтернаятиву Object.assign

Комментарии (0)

  1. Напишите первый комментарий
*Комментарий будет опубликован после проверки модератором

[MODX] Генератор настроек MIGX

Документация на русском по MODX MIGX

jQuery.Maskedinput js - документация на русском с примерами

[JS] Маска для ввода телефона +7(___)___-__-__

[MODX] Импорт и экспорт в MiniShop2. Реализация 1

[MODX] Подсказки по работе и заготовки для MiniShop2

Как включить HTTPS (SSL) в MODX - Подробная инструкция

[MODx, miniShop2] Генерация YML для выгрузки в маркет

[MODX] Примеры работы с API

[OpenCart] Вывести на главную все категории с картинками

[MODX] Сайт на обслуживании (выключить сайт)

Расширение свойств товаров minishop2

Пример перевода с помощью Yandex Translate API

[MODX, MIGX] Примеры использования

[MODX, MiniShop2] Примеры выборки where, optionFilters, innerJoin

Универсальная форма обратной связи — feedBackForm

[MODx, Gallery] Галерея. Вывести обложки альбомов и фотографии

Настройка Webpack - несколько точек входа и разделение на чанки

Отключить автозаполнение input

[Opencart] Вернуть английский язык, если вы его удалили

[MODX] pThumb - ресайз изображений. Примеры использования.

[OpenCart] Вывести модуль напрямую через контроллер

[MODX, MIGX] Вывести getImageList только если он не пустой

[MODX, MIGX] Тип поля "Список ресурсов" (resourcelist) с ограничением по родителю (parents)

[MODX, Quip] Более рабочий вариант

Все записи

Наш сайт использует куки, нажмите «ОК» если вы не против
OK