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>