Vue. Как скопировать массив и отключить реактивность?

Question

[tenaro]

есть реактивный массив, как сделать локальную копию для манипуляций, которые не затронут исходные данные?

items = [...] // реактивный массив
localItems = items
localItems.push(data) // данные добавляются в items, надо это предотвратить

знаю способ с JSON.parse(JSON.stringify(items)) - но выглядит это не очень, как это сделать лучше?

Answer 1

[Sergey Kuzmenko]

_.cloneDeep(value)

localItems = _.cloneDeep(items)

Comments

[tenaro]

подключать lodash для этого тоже не хочется, но спасибо

[Sergey Kuzmenko]

tenaro, https://www.npmjs.com/package/lodash.clonedeep - отдельный пакет, или взять функию из исходников

Answer 2

[Roman K]

В JS удивительный мир костылей. Копировать массив через JSON.parse(JSON.stringify(items))? Серьёзно? А вы кофе по утрам пьёте каждый раз покупая в ближайшем магазине кофеварку и возвращая её назад?

JSON.parse(JSON.stringify(items)) мало того, что супер дурацкий способ сделать deep copy, мало того, что самый медленный, ведь вы превращаете всё в строки, а затем парсите их назад, так более важно ещё и то, что будь у вас в этом массиве экземпляры классов, они тупо все сломаются. Этот способ работает только с примитивными типами данных и двумя контейнерами: Object и Array.

Вот так можно делать для shallow copy (а зачем вам deep, кстати?):

const arrayOne = [1, 2, 3];
const arrayCopy = [...arrayOne];

const arrayOne = [1, 2, 3];
const arrayCopy = arrayOne.concat();

const arrayOne = [1, 2, 3];
const arrayCopy = Array.from(arrayOne);

Пожалуйста, перестаньте писать квадраты

Comments

[tenaro]

я же подозревал, что что-то не так, отдельное спасибо за статью

[tenaro]

а если надо отключить реактивность не только у этого массива, но и у всех элементов внутри него?

[Roman K]

tenaro, вы не отключаете реактивность, не нужно подменять термины.

А вообще, очень зависит от задачи. Вероятней всего, достаточно сделать поверхностную копию поверхностно скопированных элементов. То есть, не deepCopy, а

const arrayOne = [1, 2, 3];
const arrayCopy = arrayOne.map(el => сделать_копию(el));

В зависимости от того, что в el, это (сделать_копию) может быть как [...el] для массива (если там массив массивов), как Object.assign(...) если это plain объект, так и создание нового экземпляра объекта, если там были свои объекты

[Andrew]

Если массив приходит через props, то лучше не делать копирование через оператор спред.
[...items].
Так как оператор спред копирует поверхностно, плюс при изменение массива который принял спред он изменит исходный, а так делать не рекомендуется.

Пример:

props: {
  employess: {
    type: Array,
    required: true,
  }
},

data() {
  return {
    // ---* вот если мы теперь будем что-то делать с items (удалять, прибавлять и тд), то наш исходный props изменится. Так делать не стоит.
    items: [...employees],
    // ---*
    items: this.employees.map(employee => employee) // или даже сделать глубокое копирование clone deep - это еще лучше.
  }
}

Примечание: Spread syntax на самом деле переходит лишь на один уровень глубже при копировании массива. Таким образом, он может не подходить для копирования многоразмерных массивов
https://developer.mozilla.org/ru/docs/Web/JavaScri...

tenaro

[Roman K]

Andrew, здесь все примеры копируют поверхностно, о чём я любезно написал. deepcopy — это чушь в 99% случаев никому не нужная, плодящая баги и тормоза.

[Andrew]

Roman Kitaev, ну props не меняют. А ты предложил ему спред, который в свою очередь будет менять ему исходный массив. Я не против спреда. Мне он нравится, но нужно понимать когда его можно использовать и как.