在setup函數(shù)中中捆，我們通過ref和reactive函數(shù)創(chuàng)建響應(yīng)式數(shù)據(jù)，其特點是坊饶，每次修改數(shù)據(jù)都會更新UI界面泄伪，這樣的問題是非常消耗性能
所以，如果我們有些時候匿级，有些操作可以不需要每次修改數(shù)據(jù)都去更新UI界面蟋滴，那么我們可以通過vue3提供的toRaw方法來獲取該數(shù)據(jù)被Proxy包裝前的原始數(shù)據(jù)，然后通過對原始數(shù)據(jù)進(jìn)行修改痘绎，進(jìn)而可以修改對應(yīng)的代理對象內(nèi)部數(shù)據(jù)津函。這是通過原始數(shù)據(jù)修改改變的，并不會觸發(fā) UI界面更新
<script>
import { reactive, toRaw } from "vue";
export default {
setup() {
const obj1= {name:'alice'};
const user = reactive(obj1);
const obj2 = toRaw(user);
console.log(obj1 === obj2);//true
function change() {
obj2.name = 'Frank';
}
return { user, change};
},
};
</script>
上面例子中孤页，通過包裝后的響應(yīng)式對象user來修改尔苦，界面會立即更新。但是如果通過修改原始數(shù)據(jù)obj2 來修改數(shù)據(jù)行施，界面是不會跟新的允坚。另外我們可以看見obj2===obj1，由此證明：toRow就是用于獲取一個Proxy對象的原始數(shù)據(jù)
以上是獲取reactive的原始數(shù)據(jù)（創(chuàng)建時響應(yīng)式數(shù)據(jù)時傳入的原始數(shù)據(jù)）蛾号，我們再來看下如何獲取ref的原始數(shù)據(jù)
我們知道ref的本質(zhì)是reactive稠项，即ref(obj)相當(dāng)于reactive({value : obj})
所以如果想通過toRaw方法獲取ref類型的原始數(shù)據(jù)，就必須明確告訴toRaw鲜结，需要獲取的是.value的值皿渗。因為.value中保存的才是當(dāng)初創(chuàng)建時傳入的原始數(shù)據(jù)
import { ref, toRaw } from "vue";
export default {
setup() {
const obj1= {name:'alice'};
const user = ref(obj1);
const obj2 = toRaw(user.value);
console.log(obj1,user,obj2);
return { user };
},
};
有的情況下，我們希望某個數(shù)據(jù)在以后的操作中永遠(yuǎn)都不會被追蹤轻腺，vue3提供了一個方法：markRaw
setup() {
const obj= {name:'alice',age:18};
obj= markRaw(obj);
const user= reactive(obj);
function change(){
user.age=19
}
return { user , change};
}
上述代碼中乐疆，obj被markRaw標(biāo)記后，當(dāng)后面將obj變成proxy對象時贬养，發(fā)現(xiàn)調(diào)用change方法改變數(shù)據(jù)時挤土，界面并不會再跟新了！
以上就是vue3 toRaw函數(shù)和markRaw函數(shù)的基本使用误算！
