vue从vue外部导入数据用于组件，我需要深度复制吗

Question

想象一下，我有一个对象，它有几个道具，我想把它们带到各种vue组件的"数据"；状态作为某种起点或默认状态。我希望每个组件从初始化的那一刻起就能够管理自己的状态。

类似于：

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

Vue会对这个对象进行深度复制，这样当它通过用户交互进行变异时，原始对象(位于一些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。