VueJS -创建引用对象的只读副本(组合API)

zvms9eto 于 2023-01-31 发布在 Vue.js

关注(0)|答案(3)|浏览(180)

我正在用onMounted钩子从数据库中获取数据，并在表单中显示对象。当用户点击保存时，我只想检查对象数据是否发生了变化。

onMounted(async () => {
  loadingBasic.value = true
  const doc = await getDocument('workspaces',props.uid) //doc is ref({}) also
  wspace.value = doc.value
  loadingBasic.value = false
})

我创建了一个只读对象，但是当wspace对象改变时，只读对象也改变了。我怎样才能创建一个引用对象的初始拷贝呢？
顺便问一下，有没有其他简单的方法来检查表单更改？

vue.js

来源：https://stackoverflow.com/questions/71386388/vuejs-create-readonly-copy-of-a-ref-object-composition-api

3条答案

按热度按时间

ie3xauqp1#

您仅复制带有wspace.value = doc.value的引用。您可以使用以下命令复制值：

wspace.value = {...doc.value}

let doc1 = {a: 1, b:2}
let doc2 = {a: 1, b:2}
let wspace1 = doc1
let wspace2 = {...doc2}

wspace1.a = 3
wspace2.a = 3

console.log('wspace1 :', wspace1)
console.log('doc1 :', doc1)
console.log('wspace2 :', wspace2)
console.log('doc2 :', doc2)

赞(0）回复(0）举报 2023-01-31

tvokkenx2#

一些建议**：**

不是shallow copy，而是对象的deep copy来保持初始状态，可以检查两个here中的差异。
要创建对象的深层副本，可以尝试以下任一方法**：**
JSON.parse(JSON.stringify(object))
通过使用spread运算符{...obj}并将结果赋给新变量。
快速比较更改后的对象和原始对象，无需迭代。如果要比较的对象具有相同顺序的属性，则可以使用JSON.stringify()。
演示：

const doc = {
    value: {
    id: 1,
    name: 'alpha'
  }
};

// making a deep copy
const deepCopy = {...doc.value}

// As user did not make any changes in the form. Comparision should return true.
console.log(JSON.stringify(deepCopy) === JSON.stringify(doc.value)); // True

// User making some changes in the form.
deepCopy.id = 2;
deepCopy.name = 'beta';

// As user make changes in the form data. Comparision should return false.
console.log(JSON.stringify(deepCopy) === JSON.stringify(doc.value)); // False

赞(0）回复(0）举报 2023-01-31

gwbalxhn3#

应使用以下选项执行深层拷贝：
结构化克隆https://developer.mozilla.org/en-US/docs/Web/API/structuredClone
常量复制条=结构化克隆（foo）

赞(0）回复(0）举报 2023-01-31