想象一下，我有一个带有多个道具的对象，我想将它们引入各种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'
})
谢谢。
Vue将对该对象进行深层复制
一个深刻的副本？不会，但是您将获得该组件的浅表副本，因为您正在创建一个新对象（使用传播语法）。
与任何浅表副本一样，如果initialData包含对象，则不会深层复制那些对象，但是将复制顶级字符串和数字（等）。
使用JSON.parse做了深刻的副本是怎样的一个黑客。最好使用像lodash这样的专用深层复制方法_.cloneDeep。或者，您也可以编写initialData为工厂函数：
const createInitialData = () => ({
foo: 'bar',
nestedObject: {
blah: 12345
}
})
data() {
return {
...createInitialData(),
somethingElse: 'hello there'
}
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句