toRaw与markRaw

20_脚手架/vue3_test/16.src_toRaw与markRaw/App.vue

@@ -0,0 +1,22 @@
+<template>
+  <button @click="isShowDemo=!isShowDemo">点击展示隐藏</button>
+  <Demo v-if="isShowDemo"/>
+</template>
+
+<script>
+import {ref} from "vue";
+import Demo from "@/components/demo.vue";
+
+export default {
+  name: 'App',
+  components: {Demo},
+  setup() {
+    let isShowDemo = ref(true)
+
+    return {
+      isShowDemo,
+    }
+  }
+
+}
+</script>

20_脚手架/vue3_test/16.src_toRaw与markRaw/components/demo.vue

@@ -0,0 +1,62 @@
+<template>
+  <h4>当前求和为： {{ sum }}</h4>
+  <button @click="sum++">点击+1</button>
+  <h2>姓名：{{ name }}</h2>
+  <h2>年龄：{{ age }}</h2>
+  <h2>薪资：{{ job.j1.salary }}</h2>
+  <h3 v-show="person.car">车辆信息：{{ person.car }}</h3>
+  <button @click="name+='~'">修改姓名</button>
+  <button @click="age++">修改年龄</button>
+  <button @click="job.j1.salary++">修改薪资</button>
+  <button @click="showRawPerson">输出最原始的person</button>
+  <button @click="addCar">给人添加一台车</button>
+  <button v-show="person.car" @click="person.car.name += '!'">修改车名</button>
+  <button v-show="person.car" @click="changeCarPrice">修改价格</button>
+</template>
+
+<script>
+import {reactive, ref, toRefs, toRaw, markRaw} from "vue";
+
+export default {
+  name: 'Demo',
+
+  setup() {
+    let sum = ref(0)
+    let person = reactive({
+      name: '张三',
+      age: 18,
+      job: {
+        j1: {
+          salary: 20
+        }
+      }
+    })
+
+    function showRawPerson() {
+      console.log(person)
+      const p = toRaw(person)
+      console.log(p)
+    }
+    function addCar() {
+      let car = {name:'奔驰', price:40}
+      // person.car = car
+      person.car = markRaw(car)
+      console.log(person)
+    }
+
+    function changeCarPrice() {
+      person.car.price++
+      console.log(person.car.price)
+    }
+
+    return {
+      sum,
+      person,
+      ...toRefs(person),
+      showRawPerson,
+      addCar,
+      changeCarPrice
+    }
+  }
+}
+</script>

20_脚手架/vue3_test/16.src_toRaw与markRaw/main.js

@@ -0,0 +1,10 @@
+// 引入的不再是Vue构造函数， 引入的是一个名为createApp的工厂函数
+import { createApp } from 'vue'
+import App from './App.vue'
+
+// createApp(App).mount('#app')
+
+// 创建应用实例对象
+const app = createApp(App)
+console.log('@@@',app)
+app.mount('#app')

20_脚手架/vue3_test/src/components/demo.vue

@@ -4,13 +4,18 @@
   <h2>姓名：{{ name }}</h2>
   <h2>年龄：{{ age }}</h2>
   <h2>薪资：{{ job.j1.salary }}</h2>
+  <h3 v-show="person.car">车辆信息：{{ person.car }}</h3>
   <button @click="name+='~'">修改姓名</button>
   <button @click="age++">修改年龄</button>
   <button @click="job.j1.salary++">修改薪资</button>
+  <button @click="showRawPerson">输出最原始的person</button>
+  <button @click="addCar">给人添加一台车</button>
+  <button v-show="person.car" @click="person.car.name += '!'">修改车名</button>
+  <button v-show="person.car" @click="changeCarPrice">修改价格</button>
 </template>
 
 <script>
-import {reactive, ref, toRefs, readonly, shallowReadonly} from "vue";
+import {reactive, ref, toRefs, toRaw, markRaw} from "vue";
 
 export default {
   name: 'Demo',
@@ -27,14 +32,30 @@ export default {
       }
     })
 
-    // person = readonly(person)
-    // person = shallowReadonly(person)
-    // sum = readonly(sum)
+    function showRawPerson() {
+      console.log(person)
+      const p = toRaw(person)
+      console.log(p)
+    }
+    function addCar() {
+      let car = {name:'奔驰', price:40}
+      // person.car = car
+      person.car = markRaw(car)
+      console.log(person)
+    }
 
+    function changeCarPrice() {
+      person.car.price++
+      console.log(person.car.price)
+    }
 
     return {
       sum,
-      ...toRefs(person)
+      person,
+      ...toRefs(person),
+      showRawPerson,
+      addCar,
+      changeCarPrice
     }
   }
 }