readonly与shallowReadonly

20_脚手架/vue3_test/15.src_readonly与shallowReadonly/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/15.src_readonly与shallowReadonly/components/demo.vue

@@ -0,0 +1,41 @@
+<template>
+  <h4>当前求和为： {{ sum }}</h4>
+  <button @click="sum++">点击+1</button>
+  <h2>姓名：{{ name }}</h2>
+  <h2>年龄：{{ age }}</h2>
+  <h2>薪资：{{ job.j1.salary }}</h2>
+  <button @click="name+='~'">修改姓名</button>
+  <button @click="age++">修改年龄</button>
+  <button @click="job.j1.salary++">修改薪资</button>
+</template>
+
+<script>
+import {reactive, ref, toRefs, readonly, shallowReadonly} from "vue";
+
+export default {
+  name: 'Demo',
+
+  setup() {
+    let sum = ref(0)
+    let person = reactive({
+      name: '张三',
+      age: 18,
+      job: {
+        j1: {
+          salary: 20
+        }
+      }
+    })
+
+    // person = readonly(person)
+    // person = shallowReadonly(person)
+    // sum = readonly(sum)
+    
+
+    return {
+      sum,
+      ...toRefs(person)
+    }
+  }
+}
+</script>

20_脚手架/vue3_test/15.src_readonly与shallowReadonly/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

@@ -1,7 +1,6 @@
 <template>
-  <h4>当前的x值是： {{ x.y }}</h4>
-  <button @click="x++">点击+1</button>
-  <h2>{{ person }}</h2>
+  <h4>当前求和为： {{ sum }}</h4>
+  <button @click="sum++">点击+1</button>
   <h2>姓名：{{ name }}</h2>
   <h2>年龄：{{ age }}</h2>
   <h2>薪资：{{ job.j1.salary }}</h2>
@@ -11,14 +10,14 @@
 </template>
 
 <script>
-import {reactive, ref, toRef, toRefs, shallowReactive, shallowRef} from "vue";
+import {reactive, ref, toRefs, readonly, shallowReadonly} from "vue";
 
 export default {
   name: 'Demo',
 
   setup() {
-    // let person = shallowReactive({  // 只考虑第一层的数据响应式
-    let person = shallowReactive({
+    let sum = ref(0)
+    let person = reactive({
       name: '张三',
       age: 18,
       job: {
@@ -27,11 +26,14 @@ export default {
         }
       }
     })
-    let x = shallowRef({y:0})  //shallow不处理对象类型的响应式
+
+    // person = readonly(person)
+    // person = shallowReadonly(person)
+    // sum = readonly(sum)
+
 
     return {
-      person,
-      x,
+      sum,
       ...toRefs(person)
     }
   }