vue从vue外部导入数据在组件中使用，是否需要深拷贝

Question

想象一下，我有一个带有多个道具的对象，我想将其带入各种 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。