vue3

15.vue3/vue_project1/src/App.vue

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

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

@@ -0,0 +1,60 @@
+<template>
+  <div>
+    <h2>watch4.0=>reactive引用数据类型</h2>
+    <h3>我在{{ obj.city }},现在是{{ obj.month }}</h3>
+    <p>今天是一个{{ obj.weather.sun }},明天是一个{{ obj.weather.rain }}</p>
+    <button @click="changeCity">修改城市</button>
+    <button @click="changeMonth">修改月份</button>
+    <button @click="changeMsg">修改信息</button>
+    <button @click="changePart1">修改第一天</button>
+    <button @click="changePart2">修改第二天</button>
+    <button @click="changeWeather">修改天气</button>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { reactive, watch } from "vue";
+let obj = reactive({
+  city: "哈尔滨",
+  month: "五月",
+  weather:{
+    sun:"晴天",
+    rain:"雨天"
+  }
+});
+function changeCity() {
+  obj.city = "天津";
+}
+function changeMonth() {
+  obj.month = "六月";
+}
+function changePart1() {
+  obj.weather.sun = '第一个'
+}
+function changePart2() {
+
+  obj.weather.rain = '第二个'
+}
+function changeWeather() {
+  obj.weather = {
+    sun:"修改后1",
+    rain:"修改后2"
+  }
+}
+function changeMsg() {
+  Object.assign(obj, { city: "北京", month: "七月" });
+}
+watch(
+  ()=>obj.city,
+  (newValue, oldValue) => {
+    console.log(newValue, oldValue);
+  },
+  {
+    deep: true,
+    immediate: true
+  }
+);
+</script>
+
+<style lang="scss" scoped>
+</style>