vue toRaw和markRaw的使用

toRaw和markRaw都是Vue中的响应式辅助函数。

1. toRaw函数 toRaw函数用于获取一个响应式对象的原始值，即将响应式对象转换为普通的JavaScript对象。

例子：

import { reactive, toRaw } from 'vue'
 
const obj = reactive({
  name: 'John',
  age: 25
})
 
const rawObj = toRaw(obj)
 
console.log(rawObj) // 输出：{ name: 'John', age: 25 }

1. markRaw函数 markRaw函数用于标记一个对象为“非响应式”，即使这个对象被用作响应式对象的属性，也不会被转换为响应式。

例子：

import { reactive, markRaw } from 'vue'
 
const obj = reactive({
  name: 'John',
  age: 25
})
 
const data = {
  obj: markRaw(obj),
  message: 'Hello'
}
 
console.log(data.obj.name) // 输出：'John'
console.log(data.obj.age) // 输出：25
 
obj.name = 'Tom'
console.log(data.obj.name) // 输出：'John'，修改obj的name属性不会影响data.obj的值

在上面的例子中，我们将obj对象通过markRaw函数标记为“非响应式”，然后将它作为data对象的属性。即使obj被修改，data.obj的值仍然保持不变