文章目录 toReftoValuetoRefstoRowmarkRawtoRef和toRefs的区别toRaw 和markRaw的用处 toRef toRef 函数可以将一个响应式对象的属性转换为一个独立的 ref 对象。返回的是一个指向源对象属性的 ref 引用，任何对该引用的修改都会同步到源对象属性上。使用 toRef 时需要传入源对象和属性名作为参数。转换后的响应式可以

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

在 Vue 3 中，markRaw 是一个用于告诉 Vue 的响应性系统不要对某个对象进行转换或追踪其响应性的函数。当你有一个对象，并且你确定你不需要它成为响应性对象时，你可以使用 markRaw 来标记它。这在一些场景中非常有用，比如当你需要集成一个第三方库或插件，并且这个库或插件的某些部分不需要是响应性的。 下面是一个详细的示例，展示了如何在 Vue 3 中使用 markRaw： impo

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

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