热门：华为支持参数分辨率解决方法控制属性启动升级错误平台推荐步骤模式查询运行空间文件夹鼠标图标重启激活联想检查状态应用程序

Vue3.0API介绍中 readonly 使用示例

2023-04-11 22:02:49

Vue3.0API介绍中 readonly 使用示例
Vue3.0API介绍中 readonly 使用示例
 
readonly
接受一个对象 (响应式或纯对象) 或 ref 并返回原始对象的只读代理。只读代理是深层的：任何被访问的嵌套 property 也是只读的。
 
<script setup>
import { watchEffect, reactive, readonly } from "vue";
const original = reactive({ count: 0 });
 
const copy = readonly(original);
 
watchEffect(() => {
  // 用于响应性追踪
  console.log(copy.count);
});
 
// 变更 original 会触发依赖于副本的侦听器
original.count+=2;
 
// 变更副本将失败并导致警告
copy.count++;
</script>
只读代理对象一个对象嵌套响应式

推荐阅读