vue3

13.Vue3/project3/src/main.ts

@@ -1,6 +1,8 @@
 import { createApp } from 'vue'
 import router from './router'
-import App from './App.vue'
+import App from './views/readonly-shallowReadonly.vue'
+// import App from './views/shallowRef-shallowReactive.vue'
+// import App from './App.vue'
 
 import './assets/book.css'
 const app = createApp(App);

13.Vue3/project3/src/views/readonly-shallowReadonly.vue

@@ -0,0 +1,59 @@
+<template>
+  <div>
+    <h1>readonly-shallowReadonly</h1>
+    <h3>sum数值:{{ sum }}</h3>
+    <h3>sum1数值:{{ sum1 }}</h3>
+    <h3>第一份：{{ car.brand }}--{{ car.options.a }}</h3>
+    <h3>第二份：{{ car1.brand }}--{{ car1.options.a }}</h3>
+    <button @click="changeSum">修改sum</button>
+    <button @click="changeSum1">修改sum1</button>
+    <button @click="changeCar">修改Car</button>
+    <button @click="changeCar1">修改Car1</button>
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive, readonly,shallowReadonly} from 'vue'
+let sum = ref(1);
+let sum1 = readonly(sum);
+function changeSum() {
+    sum.value = 10;
+}
+function changeSum1() {
+    sum1.value = 100;
+}
+let car = reactive({
+    brand:"奔驰",
+    color: 'black',
+    options:{
+        a:1,
+    
+    }
+})
+let car1 = shallowReadonly(car)
+function changeCar() {
+    // Object.assign(car,{
+    //     brand:"1",
+    //     color:'2',
+    //     options:{
+    //         a:'3'
+    //     }
+    // })
+    car.options.a = '10'
+    // car.brand = '10'
+}
+function changeCar1() {
+    // Object.assign(car1,{
+    //     brand:"11",
+    //     color:'21',
+    //     options:{
+    //         a:'31'
+    //     }
+    // })
+    // car1.brand = '20'
+    car1.options.a = '20'
+}
+</script>
+<style lang='scss' scoped>
+
+</style>

13.Vue3/project3/src/views/shallowRef-shallowReactive.vue

@@ -0,0 +1,65 @@
+<template>
+  <div>
+    <h1>shallowRef&&shallowReactive</h1>
+    <!-- <h3>Ref:{{ sum }}</h3>
+    <h3>shallowRef:{{ sum1 }}</h3> -->
+    <h3>Ref:{{ car.brand }}--{{ car.color }}--{{ car.options.a }}</h3>
+    <h3>shallowRef:{{ car1.brand }}--{{ car1.color }}--{{ car1.options.b }}</h3>
+    <button @click="changePart1">修改ref</button>
+    <button @click="changePart2">修改shallowRef</button>
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive, shallowRef,shallowReactive} from 'vue'
+let sum = ref(10);
+console.log(sum.value,'1');
+let sum1 = shallowRef(20);
+console.log(sum1.value,'2');
+function changePart1() {
+    // // sum.value = 20;
+    // car.brand = '奔驰1';
+    // car.color = 'white'
+    car.options.a = '10'
+    // car =
+    // Object.assign(car,{
+    //     brand:"哈哈",
+    //     color:'hh'
+    // })
+}
+function changePart2() {
+    // sum1.value = 30;
+    // car1.brand = '劳斯莱斯1';
+    // car1.color = 'black'
+    car1.options.b = '100'
+    
+    // car1.value = {
+    //     brand:"哈哈",
+    //     color:'hh'
+    // }
+    // Object.assign(car1,{
+    //     brand:"哈哈",
+    //     color:'hh'
+    // })
+}
+let car = reactive({
+    brand:"奔驰",
+    color: 'black',
+    options:{
+        a:1,
+    
+    }
+})
+let car1 = shallowReactive({
+    brand:"劳斯莱斯",
+    color: 'white',
+    options:{
+        b:2,
+    
+    }
+})
+
+</script>
+<style lang='scss' scoped>
+
+</style>