Vue3的reactive函数

20_脚手架/vue3_test/4.src_reactive函数的使用/App.vue

@@ -0,0 +1,59 @@
+<template>
+  <h1>个人信息：</h1>
+  <h2>姓名：{{ person.name }}</h2>
+  <h2>年龄：{{ person.age }}</h2>
+  <h2>工作种类：{{ person.job.type }}</h2>
+  <h2>薪水：{{ person.job.salary }}</h2>
+  <h2>爱好：{{ person.hobby }}</h2>
+  <h2>c的值：{{ person.job.a.b.c }}</h2>
+  <button @click="changeInfo">修改信息</button>
+</template>
+
+<script>
+import {ref, reactive} from "vue";
+
+export default {
+  name: 'App',
+  setup() {
+    // 数据
+    // let name = ref('张三')
+    // let age = ref(19)
+    // let job = reactive({
+    //   type: '前端工程师',
+    //   salary: '30K',
+    //   a: {
+    //     b:{
+    //       c: 666
+    //     }
+    //   }
+    // })
+    // let hobby = reactive(['抽烟','喝酒','烫头'])
+    let person = reactive({
+      name: '张三',
+      age: 18,
+      job:{
+        type: '前端工程师',
+        salary: '30K',
+        a: {
+          b:{
+            c: 666
+          }
+        }
+      },
+      hobby: ['抽烟','喝酒','烫头']
+    })
+    function changeInfo() {
+      person.name = '李四'
+      person.age = 88
+      person.job.type = '后端工程师'
+      person.job.salary = '31K'
+      person.hobby[0] = '测试'
+    }
+
+    return {
+      person,
+      changeInfo,
+    }
+  }
+}
+</script>

20_脚手架/vue3_test/4.src_reactive函数的使用/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/App.vue

@@ -1,38 +1,57 @@
 <template>
   <h1>个人信息：</h1>
-  <h2>姓名：{{ name }}</h2>
+  <h2>姓名：{{ person.name }}</h2>
-  <h2>年龄：{{ age }}</h2>
+  <h2>年龄：{{ person.age }}</h2>
-  <h2>工作种类：{{ job.type }}</h2>
+  <h2>工作种类：{{ person.job.type }}</h2>
-  <h2>薪水：{{ job.salary }}</h2>
+  <h2>薪水：{{ person.job.salary }}</h2>
+  <h2>爱好：{{ person.hobby }}</h2>
+  <h2>c的值：{{ person.job.a.b.c }}</h2>
   <button @click="changeInfo">修改信息</button>
 </template>
 
 <script>
-import {ref} from "vue";
+import {ref, reactive} from "vue";
 
 export default {
   name: 'App',
   setup() {
     // 数据
-    let name = ref('张三')
+    // let name = ref('张三')
-    let age = ref(19)
+    // let age = ref(19)
-    let job = ref({
+    // let job = reactive({
+    //   type: '前端工程师',
+    //   salary: '30K',
+    //   a: {
+    //     b:{
+    //       c: 666
+    //     }
+    //   }
+    // })
+    // let hobby = reactive(['抽烟','喝酒','烫头'])
+    let person = reactive({
+      name: '张三',
+      age: 18,
+      job:{
         type: '前端工程师',
-      salary: '30K'
+        salary: '30K',
+        a: {
+          b:{
+            c: 666
+          }
+        }
+      },
+      hobby: ['抽烟','喝酒','烫头']
     })
-
     function changeInfo() {
-      name.value = '李四'
+      person.name = '李四'
-      age.value = 88
+      person.age = 88
-      job.value.type = '后端工程师'
+      person.job.type = '后端工程师'
-      job.value.salary = '31K'
+      person.job.salary = '31K'
-      console.log(name,age)
+      person.hobby[0] = '测试'
     }
 
     return {
-      name,
+      person,
-      age,
-      job,
       changeInfo,
     }
   }