vue3的toRef和toRefs的学习

20_脚手架/vue3_test/13.src_toRef和toRefs/App.vue

@@ -0,0 +1,22 @@
+<template>
+  <button @click="isShowDemo=!isShowDemo">点击展示隐藏</button>
+  <Demo v-if="isShowDemo"/>
+</template>
+
+<script>
+import {ref} from "vue";
+import Demo from "@/components/demo.vue";
+
+export default {
+  name: 'App',
+  components: {Demo},
+  setup() {
+    let isShowDemo = ref(true)
+
+    return {
+      isShowDemo,
+    }
+  }
+
+}
+</script>

20_脚手架/vue3_test/13.src_toRef和toRefs/components/demo.vue

@@ -0,0 +1,37 @@
+<template>
+  <h2>{{ person }}</h2>
+  <h2>姓名：{{ name }}</h2>
+  <h2>年龄：{{ age }}</h2>
+  <h2>薪资：{{ job.j1.salary }}</h2>
+  <button @click="name+='~'">修改姓名</button>
+  <button @click="age++">修改年龄</button>
+  <button @click="job.j1.salary++">修改薪资</button>
+</template>
+
+<script>
+import {reactive,toRef,toRefs} from "vue";
+
+export default {
+  name: 'Demo',
+
+  setup() {
+    let person = reactive({
+      name: '张三',
+      age: 18,
+      job: {
+        j1: {
+          salary: 20
+        }
+      }
+    })
+
+    return {
+      person,
+      // name:toRef(person, 'name'),
+      // age: toRef(person, 'age'),
+      // salary: toRef(person.job.j1, 'salary')
+      ...toRefs(person)
+    }
+  }
+}
+</script>

20_脚手架/vue3_test/13.src_toRef和toRefs/main.js

@@ -0,0 +1,10 @@
+// 引入的不再是Vue构造函数， 引入的是一个名为createApp的工厂函数
+import { createApp } from 'vue'
+import App from './App.vue'
+
+// createApp(App).mount('#app')
+
+// 创建应用实例对象
+const app = createApp(App)
+console.log('@@@',app)
+app.mount('#app')

20_脚手架/vue3_test/src/components/demo.vue

@@ -1,26 +1,37 @@
 <template>
-  <h2>当前求和为：{{ sum }}</h2>
+  <h2>{{ person }}</h2>
-  <button @click="sum++">点击+1</button>
+  <h2>姓名：{{ name }}</h2>
-  <hr>
+  <h2>年龄：{{ age }}</h2>
-  <h2>当前点击时鼠标的坐标为：x:{{point.x}} y:{{point.y}}</h2>
+  <h2>薪资：{{ job.j1.salary }}</h2>
+  <button @click="name+='~'">修改姓名</button>
+  <button @click="age++">修改年龄</button>
+  <button @click="job.j1.salary++">修改薪资</button>
 </template>
 
 <script>
-import {ref} from "vue";
+import {reactive,toRef,toRefs} from "vue";
-import usePoint from "@/hooks/usePoint";
 
 export default {
   name: 'Demo',
 
   setup() {
-    console.log("___setup___")
+    let person = reactive({
-    let sum = ref(0)
+      name: '张三',
-    let point = usePoint()
+      age: 18,
+      job: {
+        j1: {
+          salary: 20
+        }
+      }
+    })
 
     return {
-      sum,
+      person,
-      point
+      // name:toRef(person, 'name'),
+      // age: toRef(person, 'age'),
+      // salary: toRef(person.job.j1, 'salary')
+      ...toRefs(person)
     }
-  },
+  }
 }
 </script>

20_脚手架/vue3_test/src/hooks/usePoint.js

@@ -1,24 +0,0 @@
-import {onBeforeUnmount, onMounted, reactive} from "vue";
-
-export default function() {
-    let point = reactive({
-        x: 0,
-        y: 0
-    })
-
-    function savePoint() {
-        console.log(event.pageX, event.pageY)
-        point.x = event.pageX
-        point.y = event.pageY
-    }
-
-    onMounted(() => {
-        window.addEventListener('click', savePoint)
-    })
-
-    onBeforeUnmount(() => {
-        window.removeEventListener('click', savePoint)
-    })
-
-    return point
-}