时间戳

首页 > 解决方案 > vue 从外部 vue 导入数据用于组件，是否需要深拷贝

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

问题描述

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

谢谢。

标签： javascriptvue.js

解决方案

Vue 会对该对象进行深拷贝吗

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

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

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

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

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

推荐阅读