017:尚硅谷watch监视情况1学习示例

src/components/Person.vue

@@ -1,9 +1,7 @@
 <template>
 <div class="person">
-    姓:<input v-model="firstName"></input> <br>
+    <h2>{{ Sun }}</h2>
-    名:<input v-model="lastName"></input> <br>
+    <button @click="addSun">Add Sun</button>
-    <h2>姓名:{{ fullName }}</h2> <br>
-    <button @click="computedd">修改姓</button> <br>
     
     
 </div>
@@ -12,33 +10,30 @@
     
     <script setup lang="ts">
 
-       import { reactive, ref, computed } from 'vue';
+    import { ref, watch } from 'vue'
- 
+    let Sun = ref(0)
-        let firstName = ref('zahng');
+    function addSun(){
-        let lastName = ref('san');
+        Sun.value += 10
-
+        console.log(Sun.value)
-        let fullName = computed({
+    }
-            get(){
+    const stopWatch = watch(Sun, (newValue, oldValue) => {
-            return firstName.value.slice(0, 1).toUpperCase() + firstName.value.slice(1) + '-' + lastName.value.slice(0, 1).toUpperCase() + lastName.value.slice(1)
+        console.log(`Sun changed from ${oldValue} to ${newValue}`);
-            },
+         if (Sun.value > 100) {
-            set(val){
+        stopWatch()
-                console.log('set', val);
-                // 分割字符串
-                return val.split('-').forEach((item, index) => {
-                    if (index === 0) {
-                        firstName.value = item;
-                    } else {
-                        lastName.value = item;
-                    }
-                })
-            }
-        })
-        function computedd() {
-            fullName.value = 'li-si';
         }
+    })
+   
 
     </script>
 
+
+
+
+
+
+
+
+
     <style scoped>
 
         .person{