019:尚硅谷watch监视情况3学习示例

src/components/Person.vue

@@ -1,7 +1,7 @@
 <template>
 <div class="person">
     <h2>姓名:{{ person.name }}</h2>
-    <p>年龄: {{ person.age  }}</p>
+    <h2>年龄: {{ person.age  }}</h2>
     <button @click="changeName">Add Sun</button>
     <button @click="changePerson">Change Person</button>
     
@@ -12,19 +12,20 @@
     
     <script setup lang="ts">
 
-    import { ref, watch } from 'vue'
+    import { reactive, watch } from 'vue'
-    let person = ref({name: 'John', age: 30})
+    let person = reactive({name: 'John', age: 30})
     function changeName(){
-        person.value.name += 'Mary张三'
+        person.name += '~'
-        console.log(person.value.name);
+        person.age += 100
+        console.log(person.name);
     }
     function changePerson(){
-        person.value = {name: 'Mary332', age: 20}
+        Object.assign(person, {name: 'Mary', age: 20})
     }
-    const stopWatch = watch(person, (newValue, oldValue) => {
+    watch(person, (newValue, oldValue) => {
         console.log('person的值发生了变化', newValue, oldValue);
        
-    },{deep: true})
+    })
    
 
     </script>