Блог

Главная - Вопросы по программированию - vue импортирует данные из внешнего vue для использования в компоненте, нужно ли мне глубокое копирование

vue импортирует данные из внешнего vue для использования в компоненте, нужно ли мне глубокое копирование

#javascript #vue.js

#javascript #vue.js

Вопрос:

Представьте, что у меня есть объект с несколькими реквизитами, который я хочу перевести в состояние «данных» различных компонентов vue в качестве отправной точки или состояния по умолчанию. Я хочу, чтобы каждый компонент мог управлять своим собственным состоянием с момента его инициализации.

Что-то вроде:

 import { initialData } from '../../some-data.js'

Vue.component('my-component', {
  data: function () {
    return {
       ...initialData,
       somethingElse: 'hello there",
    }
  },
  template: 'Hi'
})

Будет ли Vue создавать глубокую копию этого объекта, чтобы при его изменении в результате взаимодействия с пользователем исходный объект (находящийся в some-data.js ) не будет мутировано или мне нужно будет сделать это самому, используя что-то вроде:

 import { initialData } from '../../some-data.js'

Vue.component('my-component', {
  data: function () {
    return {
       ...JSON.parse(JSON.stringify(initialData)),
       somethingElse: 'hello there'
    }
  },
  template: 'Hi'
})

Спасибо.

Ответ №1:

Будет ли Vue создавать глубокую копию этого объекта

Глубокое копирование? Нет, но вы получите мелкую копию для этого компонента, потому что вы создаете новый объект (с расширенным синтаксисом).

Как и при любом мелком копировании, если initialData содержит объекты, то эти объекты не будут скопированы глубоко, но будут скопированы строки и числа верхнего уровня (и т.д.).

Использование JSON.parse для выполнения глубокого копирования — это своего рода взлом. Лучше использовать специальный метод глубокого копирования, такой как Lodash _.cloneDeep . Или вы можете просто написать initialData как заводскую функцию:

 const createInitialData = () => ({
  foo: 'bar',
  nestedObject: {
    blah: 12345
  }
})
  
 data() {
  return {
    ...createInitialData(),
    somethingElse: 'hello there'
  }
}

Комментарии:

1. Вы также можете использовать mixin для установки данных, глубокое копирование или фабрики не нужны, они развязаны, а также объединены с дополнительными данными playcode.io/694463 до тех пор, пока у вас нет одного и того же ключа в данных, этот ключ имеет приоритет

2. @LawrenceCherone Миксин все равно содержит заводскую функцию ( data это функция). Подход mixin менее гибкий, чем просто использование простой функции, не зависящей от vue. В зависимости от варианта использования это может быть лучшим подходом.

Ответ №2:

Почему бы не попробовать и не посмотреть, что произойдет?

В some-data.js конце файла добавьте что-то вроде:

 setInterval(function() { console.log(initialData) }, 1000);

Затем, когда вы импортируете его, измените что-нибудь и посмотрите, что происходит с журналами.

В любом случае вам, вероятно, следует использовать Vuex.