VueJS - 创建 ref 对象的只读副本（组合 API）

Question

我正在通过 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 对象改变时，只读对象也在改变。如何创建 ref 对象的未更改初始副本？

顺便问一下，还有另一种检查表单更改的简便方法吗？

Answer 1

您只复制了带有 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)

Answer 2

一些建议:

而不是 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

VueJS - 创建 ref 对象的只读副本（组合 API）

VueJS - create readonly copy of a ref object (Composition API)

javascript

readonly

vue.js

vuejs3

vue-composition-api