vue 從 vue 外部導入數據用於組件中，我需要深拷貝嗎

Question

想象一下，我有一個帶有多個 props 的對象，我想將它們帶入各種 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'
})

謝謝。

Answer 1

Vue 會做這個對象的深拷貝嗎

深拷貝？ 不，但您將獲得該組件的淺表副本，因為您正在創建一個新對象（使用擴展語法）。

與任何淺拷貝一樣，如果initialData包含對象，那么這些對象將不會被深拷貝，但會拷貝頂級字符串和數字（​​等）。

---

使用JSON.parse進行深度復制是一種技巧。 最好使用專用的深度復制方法，例如 lodash _.cloneDeep 。 或者您可以將initialData編寫為工廠函數：

const createInitialData = () => ({
  foo: 'bar',
  nestedObject: {
    blah: 12345
  }
})

data() {
  return {
    ...createInitialData(),
    somethingElse: 'hello there'
  }
}

Answer 2

為什么不試試看會發生什么？

在some-data.js文件的最后添加如下內容：

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

然后當你導入它時，修改一些東西，看看日志會發生什么。

無論是哪種情況，您都應該使用 Vuex。