外部引入ts

src/App.vue

@@ -1,11 +1,29 @@
-<script setup lang="ts"></script>
-
 <template>
-  <h1>You did it!</h1>
-  <p>
-    Visit <a href="https://vuejs.org/" target="_blank" rel="noopener">vuejs.org</a> to read the
-    documentation
-  </p>
+  <dev>
+    <p>姓名：<input v-model="userName" /></p>
+    <p>薪水：<input v-model="salary" /></p>
+    <button @click="zhanggongzi">涨工资</button>
+    <button @click="kougongzi"">扣工资</button>
+  </dev>
+
+  <hr />
+
+  <dev>
+    <p>姓名：<input v-model="mySalary.userName" /></p>
+    <p>薪水：<input v-model="mySalary.salary" /></p>
+    <button @click="mySalary.zhanggongzi">涨工资</button>
+    <button @click="mySalary.kougongzi">扣工资</button>
+  </dev>
+
 </template>
 
+<script setup lang="ts">
+import { reactive } from 'vue'
+import MySalary from '@/components/MySalary'
+
+let {userName, salary, zhanggongzi, kougongzi} = MySalary()
+const mySalary = reactive(MySalary())
+
+</script>
+
 <style scoped></style>

src/components/MySalary.ts

@@ -0,0 +1,13 @@
+import { ref } from 'vue';
+
+export default function(){
+    const userName = ref("wkn")
+    const salary = ref(3000)
+    function zhanggongzi(){
+        salary.value += 100
+    }
+    function kougongzi(){
+        salary.value -= 100
+    }
+    return {userName, salary ,zhanggongzi, kougongzi }
+}