Web1020/13.Vue3/project3/src/views/toRaw_markRaw.vue

<template>
  <div>
    <h1>toRaw-markRaw</h1>
    <h3>{{ news1.a }}</h3>
    <button @click="changeMain">修改</button>
  </div>
</template>

<script setup>
import { ref, reactive,toRaw,markRaw} from 'vue'
let person = reactive({
    name:"图图",
    age:3
})
console.log(person,'对象')
// 将响应式对象变成原始对象
let p1 = toRaw(person);
console.log(p1,'p1')
let obj = {
    name:'哆啦A梦',
    age:7
}
console.log(obj,'obj');
// let obj1 = markRaw(person);
// console.log(obj1,'obj1')

let news = markRaw({a:12,b:'哈哈'});
let news1 = reactive(news);
console.log(news,'news')
console.log(news1,'news1')
function changeMain() {
    news1.a = 11;
}
</script>
<style lang='scss' scoped>

</style>