vue3

17.Vue3/project/src/App.vue

@@ -35,6 +35,12 @@ export default {
     <hr>
     <hr>
     <Demo3></Demo3>
+    <hr>
+    <hr>
+    <Demo4></Demo4>
+    <hr>
+    <hr>
+    <Demo4></Demo4>
   </div>
 </template>
 
@@ -42,6 +48,8 @@ export default {
 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';
 // export default {
 //   // components:{
 //   //   Demo1

17.Vue3/project/src/components/Demo4.vue

@@ -0,0 +1,27 @@
+<template>
+  <div>
+    <h2>Demo4</h2>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, reactive, toRefs, toRef } from "vue";
+// let [a,b,c,d] = [12,3,4,5];
+// let obj = {
+//     a:1,
+//     b:2
+// }
+// console.log({...obj});
+let obj = reactive({
+  name: "小红",
+  age: 10,
+});
+let {name,age} = toRefs(obj);
+console.log(name.value,'name')
+console.log(age.value,'age')
+let a = toRef(obj,'name');
+console.log(a,'a')
+</script>
+
+<style lang="scss" scoped>
+</style>

17.Vue3/project/src/components/Demo5.vue

@@ -0,0 +1,16 @@
+<template>
+  <div>
+    <h2>Demo5</h2>
+    <p>
+        Computed
+    </p>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import {ref,reactive} from "vue" 
+
+</script>
+
+<style lang="scss" scoped>
+</style>