toRaw
- 響應(yīng)式數(shù)據(jù)拆解匠楚，當(dāng)通過(guò)ref或者reactive生成響應(yīng)式數(shù)據(jù)的時(shí)候巍膘，修改數(shù)據(jù)不想引起UI的變化
舉個(gè)栗子如下
<template>
<div class="page-wrapper">
<p>-------------------------------toRaw-----------------------</p>
<p>stu: {{stu}}</p>
<button @click="changeStu">點(diǎn)我一下,changeStu</button>
<p>rawStu： {{rawStu}}</p>
<button @click="changeRawStu">>點(diǎn)我一下,changeRawStu</button>
</div>
</template>
<script lang="js">
import { defineComponent, reactive, toRaw } from 'vue';
export default defineComponent({
name: 'toRow-test',
setup(){
let stu= reactive({
name: 'zs',
age: 18
})
let rawStu= toRaw(stu);
function changeStu() {
stu.name= 'ls';
}
function changeRawStu() {
rawStu.name= 'ww';
console.log('changeStu', stu);
console.log('changeRawStu', rawStu);
}
return {
stu,
rawStu,
changeStu,
changeRawStu
}
}
})
</script>
markRaw
- 原始數(shù)據(jù)通過(guò)markRaw封裝之后，再用ref或者reactive封裝的時(shí)候返回的還是原始數(shù)據(jù)
還是舉個(gè)栗子
<template>
<div class="page-wrapper">
<p>-------------------------------markRow-----------------------</p>
<p>stu: {{stu}}</p>
<button @click="changeStu">點(diǎn)我一下,changeStu</button>
</div>
</template>
<script lang="js">
import { defineComponent, reactive, markRaw } from 'vue';
export default defineComponent({
name: 'toRow-test',
setup(){
let obj= {
name: 'zs',
age: 18
}
obj= markRaw(obj);
console.log('markRaw obj', obj);
let stu= reactive(obj);
console.log('reactive stu', stu);
function changeStu() {
stu.name= 'ls';
console.log('changeStu', stu);
}
return {
stu,
changeStu
}
}
})
</script>
