Vue3的ref函数

20_脚手架/vue3_test/3.src_ref函数的使用/App.vue

@@ -0,0 +1,40 @@
+<template>
+  <h1>个人信息：</h1>
+  <h2>姓名：{{ name }}</h2>
+  <h2>年龄：{{ age }}</h2>
+  <h2>工作种类：{{ job.type }}</h2>
+  <h2>薪水：{{ job.salary }}</h2>
+  <button @click="changeInfo">修改信息</button>
+</template>
+
+<script>
+import {ref} from "vue";
+
+export default {
+  name: 'App',
+  setup() {
+    // 数据
+    let name = ref('张三')
+    let age = ref(19)
+    let job = ref({
+      type: '前端工程师',
+      salary: '30K'
+    })
+
+    function changeInfo() {
+      name.value = '李四'
+      age.value = 88
+      job.value.type = '后端工程师'
+      job.value.salary = '31K'
+      console.log(name,age)
+    }
+
+    return {
+      name,
+      age,
+      job,
+      changeInfo,
+    }
+  }
+}
+</script>

20_脚手架/vue3_test/3.src_ref函数的使用/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,27 +1,39 @@
 <template>
   <h1>个人信息：</h1>
-  <h2>姓名：{{name}}</h2>
-  <h2>年龄：{{age}}</h2>
-  <button @click="sayHello">点击</button>
+  <h2>姓名：{{ name }}</h2>
+  <h2>年龄：{{ age }}</h2>
+  <h2>工作种类：{{ job.type }}</h2>
+  <h2>薪水：{{ job.salary }}</h2>
+  <button @click="changeInfo">修改信息</button>
 </template>
 
 <script>
+import {ref} from "vue";
+
 export default {
   name: 'App',
   setup() {
     // 数据
-    let name = '张三'
-    let age = 19
+    let name = ref('张三')
+    let age = ref(19)
+    let job = ref({
+      type: '前端工程师',
+      salary: '30K'
+    })
 
-    // 方法
-    function sayHello() {
-      alert(`名字：${name}，年龄：${age}`)
+    function changeInfo() {
+      name.value = '李四'
+      age.value = 88
+      job.value.type = '后端工程师'
+      job.value.salary = '31K'
+      console.log(name,age)
     }
 
     return {
       name,
       age,
-      sayHello,
+      job,
+      changeInfo,
     }
   }
 }