vue3

16.vue3/project1/src/App.vue

@@ -2,7 +2,9 @@
   <div>
     <hr />
     <hr />
-    <Demo16></Demo16>
+    <Demo18></Demo18>
+    <!-- <Demo17></Demo17> -->
+    <!-- <Demo16></Demo16> -->
     <!-- <Demo15></Demo15> -->
     <!-- <Demo14 :news="person"></Demo14> -->
     <!-- <Demo13 v-if="show"></Demo13> -->
@@ -50,7 +52,8 @@ import { ref, reactive } from "vue";
 // import Demo13 from "./components/Demo13.vue";
 // import Demo14 from "./components/Demo14.vue";
 // import Demo15 from "./components/Demo15.vue";
-import Demo16 from "./components/Demo16.vue";
+// import Demo17 from "./components/Demo17.vue";
+import Demo18 from "./components/Demo18.vue";
 
 interface x {
   name: string;

16.vue3/project1/src/components/Demo17.vue

@@ -0,0 +1,33 @@
+<template>
+  <div>
+    <h1>readonly</h1>
+    <h2>Ref:{{ bb.name }}--{{ bb.age }}--{{ bb.x.a }}</h2>
+    <button @click="handleChange">修改</button>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, reactive, shallowReadonly } from "vue";
+let aa = ref({
+  name: "图图",
+  age: 3,
+  x: {
+    a: 1,
+  },
+});
+let bb = shallowReadonly(aa);
+function handleChange() {
+  // bb.name = "孙悟空";
+  // // aa.age = 30;
+  // bb.value.x.a = 99;
+  // bb.value = {
+  //   name: "猪八戒",
+  //   age: 4,
+  //   x: { a: 88 },
+  // };
+  // Object.assign(bb, aa1);
+}
+</script>
+
+<style lang="scss" scoped>
+</style>

16.vue3/project1/src/components/Demo18.vue

@@ -0,0 +1,27 @@
+<template>
+  <div>
+    <h1>toRaw--markRaw</h1>
+    <h2>Ref:{{ aa.name }}--{{ aa.age }}--{{ aa.x.a }}</h2>
+    <!-- <h2>toRaw:{{ bb.name }}--{{ bb.age }}--{{ bb.x.a }}</h2> -->
+    <!-- <button @click="handleChange">修改</button> -->
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, reactive, toRaw, markRaw } from "vue";
+let aa = reactive({
+  name: "图图",
+  age: 3,
+  x: {
+    a: 1,
+  },
+});
+console.log("aa", aa);
+let bb = toRaw(aa);
+console.log("bb", bb);
+let cc = reactive(bb);
+console.log("cc", cc);
+</script>
+
+<style lang="scss" scoped>
+</style>