如何修改vue3中的proxy数据---vue3学习笔记

如何修改vue3中的proxy数据---vue3学习笔记

在 Vue 3 中，你可以使用 ref 函数来创建一个可响应的引用，并且可以通过设置这个引用的值来修改代理的数据。

举个例子，假设你有一个对象 data，它被代理到了组件的根节点上，并且你想要修改它的 name 属性：

import { ref } from 'vue';

const data = { name: 'John' };
const proxy = ref(data);

// 修改代理的数据
proxy.value.name = 'Alice';

console.log(proxy.value.name); // 输出 'Alice'
console.log(data.name); // 输出 'Alice'

你也可以直接设置 proxy 的值来修改代理的数据：

proxy.value = { name: 'Bob' };

console.log(proxy.value.name); // 输出 'Bob'
console.log(data.name); // 输出 'Bob'

注意，如果你直接设置 proxy 的值，它会覆盖原来代理的数据，所以你需要谨慎使用这种方式。