vue3

16.vue3/project1/src/App.vue

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

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

@@ -0,0 +1,49 @@
+<template>
+  <div>
+    <h1>shallowRef与shallowReactive</h1>
+    <h2>Ref:{{ cc.name }}--{{ cc.age }}--{{ cc.x.a }}</h2>
+    <h2>shallowRef:{{ dd.name }}--{{ dd.age }}--{{ dd.x.a }}</h2>
+    <button @click="handleChange">修改</button>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, reactive, shallowRef, shallowReactive } from "vue";
+let aa = ref(1);
+let bb = shallowRef(33);
+let cc = reactive({
+  name: "图图",
+  age: 3,
+  x: {
+    a: 1,
+  },
+});
+let dd = shallowReactive({
+  name: "小明",
+  age: 13,
+  x: {
+    a: 3,
+  },
+});
+
+const handleChange = () => {
+  Object.assign(dd, {
+    name: 1,
+    age: 2,
+    x: { a: 3 },
+  });
+  // cc.name = "孙悟空";
+  //   dd.value.x.a = 11;
+  //   dd.value = {
+  //     name: "猪八戒",
+  //     age: 4,
+  //     x: { a: 99 },
+  //   };
+  //   dd.value.name = "12";
+  //   aa.value++;
+  //   bb.value++;
+};
+</script>
+
+<style lang="scss" scoped>
+</style>