toRaw和markRaw

toRaw 将一个reactive生成的响应式对象转为普通对象

markRaw 标记一个对象，使其永远不会再成为响应式对象

vue3中，用ref、reactive定义数据，是为了把普通数据，变成响应式数据

某些时候，需要将响应式数据，再变成普通数据，此时就用toRaw

<script lang="ts" setup>
	import {
     ref, reactive, toRaw, markRaw } from 'vue'
	const person = reactive({
    
	  name: '哈哈',
	  age: 10,
	  job: {
    
	    salary: 20
	  }
	})
	console.log(person)   // proxy 响应式数据
	
	const p = toRaw(person)
	console.log(p)  // object 普通数据

	const sum = ref(0)
	const s = toRaw(sum)
	console.log(s)  // undefined 因为toRaw只能处理reactive所定义的响应式数据 
</script>

setup 在整个工作过程中，只调用一次；
当需要在已经定义好的reactive数据里面在添加一个属性时，这个属性也会变成响应式的，可是如果我添加时就不想让他变成响应式的，用markRaw

<script lang="ts" setup>
	import {
     ref, reactive, toRaw, markRaw } from 'vue'
	const person = reactive({
    
	  name: '哈哈',
	  age: 10,
	  job: {
    
	    salary: 20
	  }
	})
 	
 	let car = {
     name: '汽车', price: 40 }
 	person.car = markRaw(car)  // 此时，person里面添加的car就是普通数据 
</script>