vue3

16.vue3/project1/src/App.vue

@@ -7,6 +7,12 @@
     <hr />
     <hr />
     <Demo3></Demo3>
+    <hr />
+    <hr />
+    <Demo4></Demo4>
+    <hr />
+    <hr />
+    <Demo5></Demo5>
   </div>
 </template>
 
@@ -14,6 +20,8 @@
 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";
 </script>
 
 <style lang="scss" scoped>

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

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

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

@@ -0,0 +1,37 @@
+<template>
+  <div>
+    <h1>Demo5</h1>
+    <h2>{{ name }}--</h2>
+    <button @click="changeName">修改名字</button>
+    <button @click="changePerson">修改整个人</button>
+  </div>
+</template>
+
+<script setup>
+// ref 定义引用数据类型
+import { reactive, toRefs, ref, toRef } from "vue";
+let obj = ref({
+  name: "图图",
+  age: 3,
+});
+// let { name, age } = toRefs(obj.value);
+let name = toRef(obj.value, "name");
+console.log(name.value);
+function changeName() {
+  name.value = "孙悟空";
+  console.log(name.value);
+}
+// console.log(obj);
+function changePerson() {
+  name.value = "哆啦A梦";
+  age.value = 10;
+}
+// Object.assign(obj.value, {
+//   name: "猪八戒",
+//   age: 4,
+// });
+// }
+</script>
+
+<style lang="scss" scoped>
+</style>