vue3

15.vue3/project1/src/App.vue

@@ -1,25 +1,18 @@
 <template>
-  <div>
-    <Demo1/>
-    <Demo2/>
-    <Demo3/>
-  </div>
+  <Demo1 />
+  <Demo2 />
+  <Demo3 />
+  <Demo4 />
+  <Demo5 />
+  <Demo6 />
 </template>
 
-<script>
-import Demo1 from './components/Demo1.vue';
-import Demo2 from './components/Demo2.vue';
-import Demo3 from './components/Demo3.vue';
-export default {
-  components:{
-    Demo1,
-    Demo2,
-    Demo3
-    
-  }
-}
+<script setup lang="ts" name="App">
+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";
 </script>
-
-<style>
-
-</style>
+<style lang="scss" scoped></style>

15.vue3/project1/src/components/Demo3.vue

@@ -26,8 +26,9 @@
         obj.name ='孙悟空';
     }
     function changeAll() {
+        obj = reactive({name:'哆啦A梦',age: 7,address:"大雄家"})
         // obj = {name:'哆啦A梦',age: 7,address:"大雄家"}
-        Object.assign(obj, {name:'哆啦A梦',age: 7,address:"大雄家"})
+        // Object.assign(obj, {name:'哆啦A梦',age: 7,address:"大雄家"})
     }
 </script>
 

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

@@ -0,0 +1,42 @@
+<template>
+  <div>
+    <h3>这是第四个demo</h3>
+  </div>
+</template>
+
+<script setup lang="ts" name="Demo4">
+// ref 定义引用数据类型
+/**
+ * ref 与 reactive
+ * 1.ref 基本数据类型 和 引用数据类型 （proxy去修改引用数据类型）
+ * refImpl
+ * 用于修改浅层的引用数据类型
+ * 修改一定在: .value 
+ * 2.reactive 引用数据类型
+ * proxy
+ * 直接进行修改
+ * 用于修改深层的引用数据类型
+ */
+import { ref,reactive } from "vue";
+let obj1 = ref({
+  city: "哈尔滨",
+  site: "东北",
+});
+let ha = reactive({
+    a: {
+        b:{
+            c:{
+                d:5
+            }
+        }
+    }
+})
+ha.a.b.c.d = 10;
+console.log(ha,'ha')
+let a = ref(2);
+console.log(a.value);
+console.log(obj1.value.city,'obj1');
+</script>
+<style lang="scss" scoped>
+    
+</style>

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

@@ -0,0 +1,59 @@
+<template>
+  <div>
+    <h3>这是第五个demo:ref与reactive 修改数值区别</h3>
+    <p>
+      我叫:{{ name }}, 今年:{{ age }}, 有:{{ obj.car.a1 }}和{{ obj.car.a2 }}
+    </p>
+    <button @click="changeMain">让我们做一个改变吧</button>
+    <button @click="changeName">改变姓名</button>
+    <button @click="changeAge">改变年龄</button>
+    <button @click="changeCar1">改变车辆一</button>
+    <button @click="changeCar2">改变车辆二</button>
+  </div>
+</template>
+
+<script setup lang="ts" name="Demo5">
+import { ref, reactive } from "vue";
+let name = ref("小小");
+let news = reactive({
+    a:1,
+    b:2,
+    c:ref(3)
+})
+news.c = 10;
+news.a = 10;
+console.log(news,'news');
+let age = ref(25);
+// let obj = ref({
+//   car: {
+//     a1: "玩具车",
+//     a2: "拖拉机",
+//   },
+// });
+let obj = reactive({
+  car: {
+    a1: "玩具车",
+    a2: "拖拉机",
+  },
+});
+function changeName() {
+  name.value = "大大";
+}
+function changeAge() {
+  age.value = 30;
+}
+function changeCar1() {
+//   obj.value.car.a1 = "自行车";
+obj.car.a1 = '画画';
+  console.log(obj, "1111");
+}
+function changeCar2() {
+    obj.car.a2 = '读书';
+//   obj.value.car.a2 = "平衡车";
+}
+function changeMain() {
+    obj.car = {a1:"1",a2:'3'}
+//  Object.assign(obj.value.car,{a1:'2',a2:"3"})
+}
+</script>
+<style lang="scss" scoped></style>

15.vue3/project1/src/components/Demo6.vue

@@ -0,0 +1,33 @@
+<template>
+  <div>
+    <h3>这是第六个demo</h3>
+    <p>我叫{{person.name}},今年{{person.age}}</p>
+    <button @click="changeName">修改姓名</button>
+    <button @click="changeAge">修改年龄</button>
+  </div>
+</template>
+
+<script setup lang="ts" name="Demo6">
+import { ref, reactive,toRefs,toRef } from "vue";
+let person = reactive({
+  name: "孙悟空",
+  age: 20,
+});
+// 解构
+/**
+ * 使用toRefs从person这个响应式对象里 解构出name，age 并且解构出的东西仍旧是响应式的
+ * 
+ */
+let name1 = toRef(person,'name')
+// let {name,age} = toRefs(person);
+// let [a,b,c] = [1,24,654]
+console.log(name1,'哈哈')
+// console.log(name,age,'哈哈')
+function changeName() {
+    name1.value = '哪吒'
+}
+function changeAge() {
+    age.value = 7
+}
+</script>
+<style lang="scss" scoped></style>