Vue3中的toRaw、markRaw

最新推荐文章于 2025-02-15 18:22:26 发布

前端小侯不是候

最新推荐文章于 2025-02-15 18:22:26 发布

阅读量513

点赞数 6

CC 4.0 BY-SA版权

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_59233142/article/details/135690524

文章介绍了Vue中的两个方法：toRaw用于获取响应式对象的原始非响应式形式，而markRaw则用于标记一个对象使其保持非响应式，以避免在数据传递或与第三方库交互时意外变为响应式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

toRaw：

作用：获取一个响应式对象的原始对象

使用场景：给同事数据不希望是响应式
markRaw：
作用：标记一个对象使其永远不会变成响应式

使用场景：标记第三方库，防止把第三方库变成响应式对象

<script setup lang="ts">
import {reactive,toRaw,markRaw} from 'vue'

let person = reactive({
  name: '张三',
  age: 18,
})
let rowPerson = toRaw(person)

let car = markRaw({brand:"宝马",price:100})
let rowCar = reactive(car)

const test = ()=> {
  console.log(person) //是响应式对象
  console.log(rowPerson) //不是响应式对象
  console.log(car)  //不是响应式对象
  console.log(rowCar)  //不是响应式对象
}
</script>