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。