Thu Oct 19 17:39:00 CST 2023 inscode

src/assets/main.css

@@ -33,3 +33,7 @@ a,
     padding: 0 2rem;
   }
 }
+
+.mt10px {
+    margin-top: 10px;
+}

src/views/lesson-1.vue

 <template>
     <header>
-        <h1>Lesson1</h1>
+        <h1>ref, reactive, toRef, toRefs的区别</h1>
     </header>
     <main>
-        {{number}}
+        <Divider>基本数据类型</Divider>
+        <h2>num: {{num}}</h2>
         <div>
             <lable>refNum:</lable>
             <InputNumber v-model="refNum" controls-outside />
@@ -14,16 +15,18 @@
             <InputNumber v-model="reactNum" controls-outside />
             <span>{{reactNum}}</span>
         </div>
+
+        <Divider class="mt10px"></Divider>
         <div>
             <lable>refObj:</lable>
-            <InputNumber v-model="refObj.number" controls-outside />
+            <InputNumber v-model="refObj.num" controls-outside />
             <span>{{refObj}}</span>
         </div>
         <hr />
         <h2>reactObj</h2>
         <div>
             <lable>reactObj.number:</lable>
-            <InputNumber v-model="reactObj.number" controls-outside />
+            <InputNumber v-model="reactObj.num" controls-outside />
             <span>{{reactObj}}</span>
         </div>
         <div>
@@ -37,8 +40,8 @@
             <span>{{reactObjNumToRef}}</span>
         </div>
         <div>
-            <lable>reactObjToRefs.number:</lable>
-            <InputNumber v-model="reactObjToRefs.number" controls-outside />
+            <lable>reactObjToRefs.num:</lable>
+            <InputNumber v-model="reactObjToRefs.num" controls-outside />
             <span>{{reactObjToRefs}}</span>
         </div>
         <div>
@@ -53,34 +56,34 @@
 <script setup>
 import { ref, reactive, toRef, toRefs, watch, onMounted, defineProps } from 'vue'
 
-const number = 0
+const num = 0
 
 console.log('----------------------------------------')
-const refNum = ref(number)
+const refNum = ref(num)
 console.log('refNum', refNum)
 
 console.log('----------------------------------------')
-const reactNum = reactive(number)
+const reactNum = reactive(num)
 console.log('reactNum', reactNum)
 
 console.log('----------------------------------------')
-const refObj = ref({number})
+const refObj = ref({num})
 console.log('refObj', refObj)
 
 console.log('----------------------------------------')
-const reactObj = reactive({number, child: {a: 1}})
-console.log('reactObj', reactObj)
+const obj = {num, child: {a: 1}}
+const reactObj = reactive(obj)
+console.log('reactObj', typeof(reactObj), reactObj)
 const {number: reactObjNum} = reactObj
 console.log('reactObjNum', reactObjNum)
-const reactObjNumToRef = toRef(reactObj, 'number')
+const reactObjNumToRef = toRef(reactObj, 'num')
 console.log('reactObjNumToRef', reactObjNumToRef)
 const reactObjToRefs = toRefs(reactObj)
 console.log('reactObjToRefs', reactObjToRefs)
 const reactObjChildToRefs = toRefs(reactObj.child)
 console.log('reactObjChildToRefs', reactObjChildToRefs)
-const reactObjNumToReact = reactObj.number
+const reactObjNumToReact = reactObj.num
 console.log('reactObjNumToReact', reactObjNumToReact)
-reactObj.number++
 </script>
 
 <style scoped>