在 Vuejs3 中深度克隆导入的属性

Question

我有一个如下所示的对象，它存储在一个单独的文件中，稍后作为导入从“路径”导入进入vue组件。

const myTemplate = 
{
    a:{
        key11: undefined,
        key12: undefined
    },
    b:{
        key21: undefined,
        key22: undefined
    }
    
}

在组件内部，我正在使用这个 myTemplate 对象来创建新数据属性

<script>
    data(){
        getfields: myTemplate
    }
</script>

在脚本中，我遍历 myTemplate 并为其分配来自父组件的 prop，该组件持有 key11, key12 ,key21 ,... 等

的值

myTemplate 的目的是充当 base/standard 格式，从传入的 prop 收集数据。

稍后 getfields 被 <template> 标签中的 v-for 循环显示内容

我将道具 {key11: somevalue1, key12: somevalue2} 发送到我的子组件匹配 myTemplate 对象内的键使用此子组件内的方法更新 getfields[=30= 中的相同键]

最终结果：

{
    a:{
        key11: somevalue1,
        key12: somevalue2
    },
    b:{
        key21: undefined,
        key22: undefined
    }   
}

问题：

如果是对象，JS 会复制引用，它也会更改我的 myTemplate 对象。

我希望我的 myTemplate 完好无损，如果 getfields 发生变化，我将无法以任何方式进行更改。

我试过的：

深度克隆 const getfields : JSON.parse(JSON.stringify(myTemplate)) --> 对我有用，因为 myTemplate 是 Object of objects
尝试了动态导入，希望能有所帮助，但效果不佳

让自己=这个导入（“路径”） .then((数据)=>{ self.getfields = data.default })

Answer 1

我建议您使用 Lodash 库通过 _.cloneDeep()

克隆对象

例如：

import _ from 'lodash'

。 . .

const getfields = _.cloneDeep(myTemplate)

这是我与 Vuejs 一起使用的库，用于防止原始元素中的那些意外修改，因为它只是克隆它。

官方文档：https://lodash.com/docs/

如果你的网络访问受限，你应该使用 VanillaJs 创建克隆功能，看这个 https://medium.com/weekly-webtips/deep-clone-with-vanilla-js-5ef16e0b365c

在 Vuejs3 中深度克隆导入的属性

Deep clone a imported property in Vuejs3

javascript

vue.js

vuejs2

vuejs3

在 Vuejs3 中深度克隆导入的 属性

Deep clone a imported property in Vuejs3

javascript

vue.js

vuejs2

vuejs3

在 Vuejs3 中深度克隆导入的属性