Thu Oct 19 10:07:02 CST 2023 inscode

src/views/lesson-1.vue

@@ -19,41 +19,29 @@
             <InputNumber v-model="refObj.number" controls-outside />
             <span>{{refObj}}</span>
         </div>
+        <hr />
+        <h2>reactObj</h2>
         <div>
-            <lable>refObjA:</lable>
-            <InputNumber v-model="refObjA" controls-outside />
-            <span>{{refObjA}}</span>
-        </div>
-        <div>
-            <lable>reactObj.a:</lable>
-            <InputNumber v-model="reactObj.a" controls-outside />
+            <lable>reactObj.number:</lable>
+            <InputNumber v-model="reactObj.number" controls-outside />
             <span>{{reactObj}}</span>
         </div>
         <div>
-            <lable>reactObj.a:</lable>
-            <InputNumber v-model="reactObj.a" controls-outside />
+            <lable>reactObjNum:</lable>
+            <InputNumber v-model="reactObjNum" controls-outside />
             <span>{{reactObj}}</span>
         </div>
-        <div>
-            <lable>reactObjA:</lable>
-            <InputNumber v-model="reactObjA" controls-outside />
-            <span>{{reactObjA}}</span>
-        </div>
-        <div>
-            <lable>reactToRef.a:</lable>
-            <InputNumber v-model="reactToRef.a" controls-outside />
-            <span>{{reactToRef}}</span>
-        </div>
-        <div>
-            <lable>reactToRefA:</lable>
-            <InputNumber v-model="reactToRefA" controls-outside />
-            <span>{{reactToRefA}}</span>
+                <div>
+            <lable>reactObjNum:</lable>
+            <InputNumber v-model="reactObjNum" controls-outside />
+            <span>{{reactObj}}</span>
         </div>
+        <hr />
     </main>
 </template>
 
 <script setup>
-import { ref, reactive, toRef, watch, onMounted, defineProps } from 'vue'
+import { ref, reactive, toRef, toRefs, watch, onMounted, defineProps } from 'vue'
 
 const number = 0
 
@@ -70,30 +58,27 @@ const refObj = ref({number})
 console.log('refObj', refObj)
 
 console.log('----------------------------------------')
-const reactObj = reactive({number})
+const reactObj = reactive({number, child: {a: 1}})
 console.log('reactObj', reactObj)
 const {number: reactObjNum} = reactObj
-console.log('reactObj.number', reactObj.number)
 console.log('reactObjNum', reactObjNum)
-
-console.log('----------------------------------------')
-const toRefNum = toRef(reactObj, 'number')
-console.log('toRefNum', toRefNum)
-
-console.log('----------------------------------------')
-const reactToRef = toRef(reactObj)
-const {a: reactToRefA} = {reactToRef}
+const reactObjNumToRef = toRef(reactObj, 'number')
+console.log('reactObjNumToRef', reactObjNumToRef)
+const reactObjToRefs = toRefs(reactObj)
+console.log('reactObjToRefs', reactObjToRefs)
+const reactObjChildToRefs = toRefs(reactObj.child)
+console.log('reactObjChildToRefs', reactObjChildToRefs)
 </script>
 
 <style scoped>
     main > div {
-        margin-top: 10px;
+        margin: 10px 0;
     }
     main > div > * {
         display: inline-block;
         margin-right: 10px;
     }
     main > div > lable {
-        width: 80px;
+        width: 150px;
     }
 </style>