vue3

13.Vue3/project2/src/App.vue

@@ -4,27 +4,31 @@
     <Demo1/>
     <Demo2/>
     <Demo3/>
+    <Demo4/>
+    <Demo5/>
   </div>
 </template>
 
-<script>
+<script setup 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'
 // vue2 选项式API => Option API
 // Vue3 组合式API => component API
-export default {
-  // data() {
-  //   return {
-  //     msg:"今天星期五"
-  //   }
-  // }
-  components:{
-    Demo1,
-    Demo2,
-    Demo3
-  }
-}
+// export default {
+//   // data() {
+//   //   return {
+//   //     msg:"今天星期五"
+//   //   }
+//   // }
+//   components:{
+//     Demo1,
+//     Demo2,
+//     Demo3
+//   }
+// }
 </script>
 <style scoped>
 

13.Vue3/project2/src/components/Demo3.vue

@@ -3,7 +3,7 @@
     <p>第三個demo</p>
   </div>
 </template>
-<script name="Demo3" setup>
+<script name="Demo34" setup>
 
 </script>
 // <script>

13.Vue3/project2/src/components/Demo4.vue

@@ -0,0 +1,37 @@
+<template>
+  <div>
+    <h2>我叫{{obj.name}},今年{{obj.age}}</h2>
+    <h2>我叫{{obj1.name}},今年{{obj1.age}}</h2>
+    <button @click="changeMain">修改内容</button>
+  </div>
+</template>
+
+<script setup name="Demo4">
+import { ref, reactive} from 'vue'
+/**
+ * ref 
+ * 修改数据时 需要添加.value
+ * 1.基本数据类型
+ * 2.引用数据类型
+ * RefImpl
+ * reactive
+ * 1.引用数据类型
+ * Proxy
+ */
+let obj = reactive({
+    name:"小花",
+    age:10
+})
+let obj1 = ref({
+    name:"小花1",
+    age:101
+})
+console.log(obj,'obj')
+console.log(obj1,'obj1')
+function changeMain() {
+  obj1.value.name = '哇'
+}
+</script>
+<style lang='scss' scoped>
+
+</style>

13.Vue3/project2/src/components/Demo5.vue

@@ -0,0 +1,34 @@
+<template>
+  <div>
+    <h1>我叫{{obj.name}},今年{{obj.age}},有{{obj.car.a1}}和{{obj.car.a2}}</h1>
+    <button @click="changeCar1">改变车辆一</button>
+    <button @click="changeCar">改变车辆</button>
+    <button @click="changeAll">修改全部</button>
+  </div>
+</template>
+
+<script setup name='demo5'>
+import { ref, reactive} from 'vue'
+let obj = ref({
+    name:"小明",
+    age:30,
+    car:{
+        a1:"奥迪",
+        a2:"宝马"
+    }
+})
+
+function changeCar1(){
+    obj.value.car.a1 = '自行车'
+}
+function changeCar() {
+    // obj.value.car = {a1: '1',a2:'2'}
+    Object.assign( obj.value.car,{a1: '1',a2:'2'})
+}
+function changeAll() {
+    Object.assign( obj.value,{name:'1',age:2,car:{a1:'3',a2:'4'}})
+}
+</script>
+<style lang='scss' scoped>
+
+</style>