vue3

16.vue3/project1/src/App.vue

@@ -2,7 +2,7 @@
   <div>
     <hr />
     <hr />
-    <Demo8></Demo8>
+    <Demo11></Demo11>
     <hr />
     <hr />
     <!-- <Demo7></Demo7>
@@ -35,7 +35,10 @@
 // import Demo5 from "./components/Demo5.vue";
 // import Demo6 from "./components/Demo6.vue";
 // import Demo7 from "./components/Demo7.vue";
-import Demo8 from "./components/Demo8.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 lang="scss" scoped>

16.vue3/project1/src/components/Demo10.vue

@@ -0,0 +1,48 @@
+<template>
+  <div>
+    <h1>Demo10</h1>
+    <h2>{{ obj.name }}--{{ obj.age }}--{{ obj.car }}</h2>
+    <button @click="changeName">修改名字</button>
+    <button @click="changeAge">修改年龄</button>
+    <button @click="changeCar">修改车辆</button>
+    <button @click="changePerson">修改整个人</button>
+  </div>
+</template>
+
+<script setup>
+// reactive 定义引用数据类型
+import { reactive, watch } from "vue";
+let obj = reactive({
+  name: "图图",
+  age: 3,
+  car: "自行车",
+});
+function changeName() {
+  obj.name = "孙悟空";
+}
+console.log(obj);
+function changePerson() {
+  // obj = {
+  //   name: "猪八戒",
+  //   age: 4,
+  // };
+  Object.assign(obj, {
+    name: "猪八戒",
+    age: 4,
+    car: "汽车",
+  });
+}
+function changeCar() {
+  obj.car = "摩托车";
+}
+function changeAge() {
+  obj.age = 30;
+}
+watch([() => obj.age, () => obj.car], (newValue, oldValue) => {
+  console.log("新值", newValue);
+  console.log("旧值", oldValue);
+});
+</script>
+
+<style lang="scss" scoped>
+</style>

16.vue3/project1/src/components/Demo11.vue

@@ -0,0 +1,35 @@
+<template>
+  <div>
+    <h1>Demo11</h1>
+    <h2>{{ name }}--{{ age }}</h2>
+    <button @click="changeName">修改名字</button>
+    <button @click="changeAge">修改年龄</button>
+    <button @click="changePerson">修改整个人</button>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, reactive, watch, watchEffect } from "vue";
+let name = ref("图图");
+let age = ref(3);
+function changeName() {
+  name.value = "孙悟空";
+}
+function changePerson() {
+  name.value = "猪八戒";
+  age.value = 4;
+}
+function changeAge() {
+  age.value = 30;
+}
+// watch([name, age], (newValue, oldValue) => {
+//   console.log("新值", newValue);
+//   console.log("旧值", oldValue);
+// });
+watchEffect(() => {
+  console.log("watchEffect", name.value, age.value);
+});
+</script>
+
+<style lang="scss" scoped>
+</style>

16.vue3/project1/src/components/Demo9.vue

@@ -0,0 +1,38 @@
+<template>
+  <div>
+    <h1>Demo9</h1>
+    <h2>{{ obj.name }}--{{ obj.age }}</h2>
+    <button @click="changeName">修改名字</button>
+    <button @click="changePerson">修改整个人</button>
+  </div>
+</template>
+
+<script setup>
+// reactive 定义引用数据类型
+import { reactive, watch } from "vue";
+let obj = reactive({
+  name: "图图",
+  age: 3,
+});
+function changeName() {
+  obj.name = "孙悟空";
+}
+console.log(obj);
+function changePerson() {
+  // obj = {
+  //   name: "猪八戒",
+  //   age: 4,
+  // };
+  Object.assign(obj, {
+    name: "猪八戒",
+    age: 4,
+  });
+}
+watch(obj, (newValue, oldValue) => {
+  console.log("新值", newValue);
+  console.log("旧值", oldValue);
+});
+</script>
+
+<style lang="scss" scoped>
+</style>