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

【问题标题】：vue import data from outside vue for use in a component, do I need to deep copyvue 从外部 vue 导入数据用于组件中，是否需要深拷贝
【发布时间】：2020-10-19 21:22:35
【问题描述】：

想象一下，我有一个带有几个道具的对象，我想将这些道具带入各种 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'
})

谢谢。

【问题讨论】：

标签： javascript vue.js

【解决方案1】：

Vue 会对该对象进行深层复制

深副本？不，但是您将获得该组件的浅表副本，因为您正在创建一个新对象（使用spread syntax）。

与任何浅拷贝一样，如果initialData 包含对象，则这些对象不会被深度拷贝，但会拷贝顶级字符串和数字（等）。

使用JSON.parse 进行深拷贝是一种黑客行为。最好使用像 lodash _.cloneDeep 这样的专用深拷贝方法。或者你可以把initialData写成工厂函数：

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

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

【讨论】：

您也可以使用mixin来设置数据深拷贝或者不需要工厂，它被解耦并与其他数据playcode.io/694463合并，只要在其他数据中没有相同的键该键优先
@LawrenceCherone 无论如何，mixin 仍然包含一个工厂函数（data 是一个函数）。 mixin 方法不如仅使用普通的非 vue 特定函数灵活。根据用例，这可能是更好的方法。

【解决方案2】：

为什么不试试看会发生什么？

在some-data.js 文件末尾添加如下内容：

setInterval(function() { console.log(initialData) }, 1000);

然后，当您导入它时，修改一些内容并查看日志会发生什么。

无论是哪种情况，您都应该使用 Vuex。

【讨论】：