Toraw and markraw

toRaw Will a reactive Turn the generated responsive object into a normal object

markRaw Mark an object , So that it will never be a responsive object again

vue3 in , use ref、reactive Defining data , In order to put ordinary data , Become responsive data

Some of the time , You need to put responsive data , And then become ordinary data , Use... At this time toRaw

<script lang="ts" setup>
	import {
     ref, reactive, toRaw, markRaw } from 'vue'
	const person = reactive({
    
	  name: ' ha-ha ',
	  age: 10,
	  job: {
    
	    salary: 20
	  }
	})
	console.log(person)   // proxy  Responsive data 
	
	const p = toRaw(person)
	console.log(p)  // object  Common data 

	const sum = ref(0)
	const s = toRaw(sum)
	console.log(s)  // undefined  because toRaw Can only handle reactive Defined responsive data  
</script>

setup Throughout the work , Call it once ;
When the need has been defined reactive When adding an attribute to the data , This attribute will also become responsive , But if I add it, I don't want it to become responsive , use markRaw

<script lang="ts" setup>
	import {
     ref, reactive, toRaw, markRaw } from 'vue'
	const person = reactive({
    
	  name: ' ha-ha ',
	  age: 10,
	  job: {
    
	    salary: 20
	  }
	})
 	
 	let car = {
     name: ' automobile ', price: 40 }
 	person.car = markRaw(car)  //  here ,person It added car It's normal data  
</script>