diff --git a/src/app/app.vue b/src/app/app.vue
index 74c5c43f4858800cef5c917057b7fd70f8acc3c1..7ac834cbfb7705346fdbd1910d77547211672c4d 100644
--- a/src/app/app.vue
+++ b/src/app/app.vue
@@ -1,12 +1,35 @@
 <template>
-  <h3>{{ name }}</h3>
+  <h3 @click="changeName">{{ nameEmoji }}</h3>
 </template>
 
 <script>
+import { ref, onMounted, watch, computed } from 'vue';
+
 export default {
-  data() {
+  setup() {
+    const name = ref('宁皓网');
+
+    const changeName = () => {
+      name.value = 'NINGHAO';
+    };
+
+    // 生命周期
+    onMounted(() => {
+      console.log('mounted');
+    });
+
+    // 监视数据
+    watch(name, (newName, oldName) => {
+      console.log(newName, oldName);
+    });
+
+    // 计算属性
+    const nameEmoji = computed(() => `${name.value} 🏕`);
+
     return {
-      name: '宁皓网',
+      name,
+      changeName,
+      nameEmoji,
     };
   },
 };
@@ -14,4 +37,4 @@ export default {
 
 <style>
 @import './styles/app.css';
-</style>
\ No newline at end of file
+</style>