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

Похожие статьи

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

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

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

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

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

Слайдер Slick slider в контенте ресурса

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

Bxslider отображение картинок после полной загрузки слайдера

Как обработать POST данные в PHP

Примеры использования Vuex

Выполнить код после асинхронного запроса axios во Vue

Как вызвать метод из другого компонента Vue

Заготовки JavaScript

Рекурсивно вложенный компонент Vue

Связать значения инпутов через jQuery (биндинг)

Настроить Axios чтобы принимал только JSON

Использование async/await в JavaScript с Vue.js

Js-beautify - библиотека для форматирования HTML, CSS, JS

Использование Promise.all с примерами на VueJs

Создание цикла асинхронных вызовов во Vue.js

Манипуляция с HTML во Vue.js и cash-dom

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