vue3

15.vue3/vue_project1/src/App.vue

@@ -7,8 +7,9 @@
     <Demo5 />
     <Demo6 />
     <Demo7 />
-    <Demo8/> -->
-    <Demo9/>
+    <Demo8/>
+    <Demo9/> -->
+    <Demo10/>
   </div>
 </template>
 
@@ -22,6 +23,7 @@ import Demo6 from "./components/Demo6.vue";
 import Demo7 from "./components/Demo7.vue";
 import Demo8 from "./components/Demo8.vue";
 import Demo9 from "./components/Demo9.vue";
+import Demo10 from "./components/Demo10.vue";
 </script>
 <style></style>
 

15.vue3/vue_project1/src/components/Demo10.vue

@@ -0,0 +1,36 @@
+<template>
+  <div>
+    <h2>watch3.0=>reactive引用数据类型</h2>
+    <h3>我在{{ obj.city }},现在是{{ obj.month }}</h3>
+    <button @click="changeCity">修改城市</button>
+    <button @click="changeMonth">修改月份</button>
+    <button @click="changeMsg">修改信息</button>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import {reactive,watch} from 'vue';
+let obj = reactive({
+    city:"哈尔滨",
+    month:"五月"
+})
+function changeCity(){
+    obj.city = '天津'
+}
+function changeMonth(){
+    obj.month='六月'
+}
+function changeMsg(){
+    Object.assign(obj,{city:"北京",month:"七月"})
+}
+watch(obj,(newValue,oldValue)=>{
+    console.log(newValue,oldValue)
+},{
+    deep: true,
+    immediate: true
+})
+
+</script>
+
+<style lang="scss" scoped>
+</style>