vue3

16.vue3/project1/src/App.vue

@@ -1,5 +1,11 @@
 <template>
   <div>
+    <hr />
+    <hr />
+    <Demo8></Demo8>
+    <hr />
+    <hr />
+    <!-- <Demo7></Demo7>
     <hr />
     <hr />
     <Demo6></Demo6>
@@ -17,17 +23,19 @@
     <Demo4></Demo4>
     <hr />
     <hr />
-    <Demo5></Demo5>
+    <Demo5></Demo5> -->
   </div>
 </template>
 
 <script setup>
-import Demo1 from "./components/Demo1.vue";
-import Demo2 from "./components/Demo2.vue";
-import Demo3 from "./components/Demo3.vue";
-import Demo4 from "./components/Demo4.vue";
-import Demo5 from "./components/Demo5.vue";
-import Demo6 from "./components/Demo6.vue";
+// import Demo1 from "./components/Demo1.vue";
+// import Demo2 from "./components/Demo2.vue";
+// import Demo3 from "./components/Demo3.vue";
+// import Demo4 from "./components/Demo4.vue";
+// import Demo5 from "./components/Demo5.vue";
+// import Demo6 from "./components/Demo6.vue";
+// import Demo7 from "./components/Demo7.vue";
+import Demo8 from "./components/Demo8.vue";
 </script>
 
 <style lang="scss" scoped>

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

@@ -0,0 +1,28 @@
+<template>
+  <div>
+    <h1>Demo7:ref定义的基本数据类型</h1>
+    <h2>{{ name }}</h2>
+    <button @click="handleName">修改名字</button>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, reactive, watch } from "vue";
+let name = ref("图图");
+function handleName() {
+  name.value = "孙悟空";
+}
+watch(
+  name,
+  (newValue, oldValue) => {
+    console.log("name发生了变化", newValue, oldValue);
+  },
+  {
+    deep: true,
+    immediate: true,
+  }
+);
+</script>
+
+<style lang="scss" scoped>
+</style>

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

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