Как сделать переменную не реактивной в 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