vue3---toRaw 与markRaw

1. toRaw
   · 用于获取一个响应式对象的原始（非响应式）对象，
   0.1 使用场景：
   在 Vue 3 中，当你使用 reactive 或 ref 创建一个响应式对象或属性时，Vue 会在其内部创建一个代理对象来追踪变化。然而，在某些情况下，你可能需要访问这个响应式对象的原始版本，而不是代理版本。这时，你可以使用 toRaw 函数。
   例如：

import { reactive, toRaw } from 'vue';  
  
const state = reactive({ count: 0 });  
const rawState = toRaw(state);  
  
console.log(rawState === state); // false

markRaw

· 用于将一个对象标记为非响应式的，这样 Vue 就不会将其转换为响应式对象。这在某些场景下很有用，比如当你有一个不应该被 Vue 追踪其变化的对象时。

例如：

import { reactive, markRaw } from 'vue';  
  
const rawObject = { foo: 'bar' };  
const state = reactive({  
  myRawObject: markRaw(rawObject),  
  count: 0  
});  
  
state.count++; // 响应式属性变化，会触发更新  
state.myRawObject.foo = 'baz'; // 非响应式对象变化，不会触发更新