文章目录 什么是toRaw API？为什么需要toRaw？如何使用toRaw？实际应用场景 这两天在写项目的时候，发现了一个之前没用过的api，于是上网查了一下，发现这个api还是挺常用，所以在这记录一下 什么是toRaw API？ toRaw 是 Vue 3 中的新工具，用于获取一个响应式对象的原始对象。Vue 3 中引入了响应式代理，这意味着我们通常处理的是被代理

Vue 3的响应性系统 在Vue 3中，响应性系统是构建动态Web应用程序的关键部分。Vue使用响应性系统来跟踪依赖关系，使数据更改能够自动更新视图。这使得Vue应用程序在数据变化时能够高效地更新DOM。Vue 3引入了新的Proxy对象来替代Vue 2中的Object.defineProperty。Proxy对象允许更细粒度的拦截和控制属性的访问和修改。这使得Vue的响应性系统更加灵活和高效。然

readonly与shallowReadonly readonly与shallowReadonly1. readonly：让一个响应式数据变为只读的（深只读）2. shallowReadonly：让一个响应式数据变为只读的（浅只读）3. 应用场景：不希望数据被修改时具体案例代码如下：<template><div>{{ sum }}</div><button @click="sum++">

toRef / toRefs 使 获取到的 响应式对象的属性 也具有响应式 也就是单独修改获取到的属性 原本响应式对象也会更新；反之亦然。 toRefs 主要方便解构语法，底层也是调用 toRef toRaw 去响应式结果 结果已经保存在内部属性中，toRaw 直接访问属性得到 obj[__v_raw]

Vue3-toRaw 和 markRaw 函数 toRaw(转换为原始)：将响应式对象转换为普通对象，只适用于 reactive 生成的响应式对象。markRaw(标记为原始)：标记某个对象，让这个对象永远都不具备响应式。一些集成的第三方库，会有大量的只读列表，不让其具备响应式是一种性能优化。 // App.vue toRaw 函数<template><h2>计数器1：{{data.co