Thu Oct 19 10:24:00 CST 2023 inscode

src/views/lesson-1.vue

@@ -31,10 +31,20 @@
             <InputNumber v-model="reactObjNum" controls-outside />
             <span>{{reactObj}}</span>
         </div>
-                <div>
-            <lable>reactObjNum:</lable>
-            <InputNumber v-model="reactObjNum" controls-outside />
-            <span>{{reactObj}}</span>
+        <div>
+            <lable>reactObjNumToRef:</lable>
+            <InputNumber v-model="reactObjNumToRef" controls-outside />
+            <span>{{reactObjNumToRef}}</span>
+        </div>
+        <div>
+            <lable>reactObjToRefs.number:</lable>
+            <InputNumber v-model="reactObjToRefs.number" controls-outside />
+            <span>{{reactObjToRefs}}</span>
+        </div>
+        <div>
+            <lable>reactObjNumToReact:</lable>
+            <InputNumber v-model="reactObjNumToReact" controls-outside />
+            <span>{{reactObjNumToReact}}</span>
         </div>
         <hr />
     </main>
@@ -68,6 +78,9 @@ const reactObjToRefs = toRefs(reactObj)
 console.log('reactObjToRefs', reactObjToRefs)
 const reactObjChildToRefs = toRefs(reactObj.child)
 console.log('reactObjChildToRefs', reactObjChildToRefs)
+const reactObjNumToReact = reactObj.number
+console.log('reactObjNumToReact', reactObjNumToReact)
+reactObj.number++
 </script>
 
 <style scoped>
@@ -79,6 +92,6 @@ console.log('reactObjChildToRefs', reactObjChildToRefs)
         margin-right: 10px;
     }
     main > div > lable {
-        width: 150px;
+        width: 180px;
     }
 </style>