javascript - 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

Will Vue make a deep copy of this object

深层副本？否，但您将获得该组件的浅拷贝，因为您正在创建一个新对象(使用 spread syntax )。

与任何浅复制一样，如果 initialData 包含对象，那么这些对象将不会被深复制，但顶级字符串和数字(​​等)将被复制。

---

使用 JSON.parse 进行深层复制是一种黑客行为。最好使用像lodash这样的专用深复制方法_.cloneDeep 。或者您可以将 initialData 编写为工厂函数:

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

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