toRaw
- 响应式数据拆解，当通过ref或者reactive生成响应式数据的时候，修改数据不想引起UI的变化
举个栗子如下
<template>
<div class="page-wrapper">
<p>-------------------------------toRaw-----------------------</p>
<p>stu: {{stu}}</p>
<button @click="changeStu">点我一下,changeStu</button>
<p>rawStu： {{rawStu}}</p>
<button @click="changeRawStu">>点我一下,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
- 原始数据通过markRaw封装之后，再用ref或者reactive封装的时候返回的还是原始数据
还是举个栗子
<template>
<div class="page-wrapper">
<p>-------------------------------markRow-----------------------</p>
<p>stu: {{stu}}</p>
<button @click="changeStu">点我一下,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>
