vue3

11.vue3/vue-project3/src/main.ts

@@ -1,5 +1,5 @@
 import { createApp } from 'vue'
-import App from './App.vue'
+import App from './readonly-shallowReadonly.vue'
 // import router from './router'
 import { createPinia } from 'pinia'
 

11.vue3/vue-project3/src/readonly-shallowReadonly.vue

@@ -0,0 +1,58 @@
+<template>
+  <div>
+    <h1>readonly-shallowReadonly</h1>
+    <p>sum1:{{ sum1 }}</p>
+    <p>sum2:{{ sum2 }}</p>
+    <p>第一个：{{ car.name }}--{{ car.color }}--{{ car.options.c1 }}</p>
+    <p>第二个：{{ car1.name }}--{{ car1.color }}--{{ car1.options.c1 }}</p>
+ <button @click="changeMain1">修改1</button>
+ <button @click="changeMain2">修改2</button>
+ <button @click="changeMain3">修改3</button>
+ <button @click="changeMain4">修改4</button>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import {ref,reactive,readonly,shallowReadonly} from "vue" 
+let sum1 = ref(1);
+let sum2 = readonly(sum1)
+function changeMain1() {
+    sum1.value = 10;
+}
+function changeMain2() {
+    sum2.value = 20;
+}
+let car = reactive({
+    name:'自行车',
+    color:'白',
+    options:{
+        c1:'1'
+    }
+})
+let car1 = shallowReadonly(car)
+function changeMain3() {
+    // car.name = '20';
+    // car.options.c1 = '3'
+    Object.assign(car,{
+        name:'12',
+        color:'粉色',
+        options:{
+            c1:'1212'
+        }
+    })
+}
+function changeMain4() {
+    // car1.name = '30';
+    // car1.options.c1 = '32'
+    Object.assign(car1,{
+        name:'12222',
+        color:'紫色',
+        options:{
+            c1:'ewew'
+        }
+    })
+}
+</script>
+
+<style lang="scss" scoped>
+</style>