自定义hook

20_脚手架/vue3_test/12.src_自定义hook/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/12.src_自定义hook/components/demo.vue

@@ -0,0 +1,26 @@
+<template>
+  <h2>当前求和为：{{ sum }}</h2>
+  <button @click="sum++">点击+1</button>
+  <hr>
+  <h2>当前点击时鼠标的坐标为：x:{{point.x}} y:{{point.y}}</h2>
+</template>
+
+<script>
+import {ref} from "vue";
+import usePoint from "@/hooks/usePoint";
+
+export default {
+  name: 'Demo',
+
+  setup() {
+    console.log("___setup___")
+    let sum = ref(0)
+    let point = usePoint()
+
+    return {
+      sum,
+      point
+    }
+  },
+}
+</script>

20_脚手架/vue3_test/12.src_自定义hook/hooks/usePoint.js

@@ -0,0 +1,24 @@
+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
+}

20_脚手架/vue3_test/12.src_自定义hook/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,10 +1,13 @@
 <template>
   <h2>当前求和为：{{ sum }}</h2>
   <button @click="sum++">点击+1</button>
+  <hr>
+  <h2>当前点击时鼠标的坐标为：x:{{point.x}} y:{{point.y}}</h2>
 </template>
 
 <script>
-import {ref, onBeforeMount, onMounted, onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmounted} from "vue";
+import {ref} from "vue";
+import usePoint from "@/hooks/usePoint";
 
 export default {
   name: 'Demo',
@@ -12,65 +15,12 @@ export default {
   setup() {
     console.log("___setup___")
     let sum = ref(0)
-
-    // 通过组合API的形式的生命周期钩子
-
-    onBeforeMount(()=>{
-      console.log("___onBeforeMount___")
-    })
-    onMounted(()=>{
-      console.log("___onMounted___")
-    })
-    onBeforeUpdate(()=>{
-      console.log("___onBeforeUpdate___")
-    })
-    onUpdated(()=>{
-      console.log("___onUpdated___")
-    })
-    onBeforeUnmount(()=>{
-      console.log("___onBeforeUnmount___")
-    })
-    onUnmounted(()=>{
-      console.log("___onUnmounted___")
-    })
+    let point = usePoint()
 
     return {
-      sum
+      sum,
+      point
     }
   },
-
-  // // 通过配置项的形式使用生命周期
-  // beforeCreate() {
-  //   console.log('---beforeCreate---')
-  // },
-  //
-  // created() {
-  //   console.log("---created---")
-  // },
-  //
-  // beforeMount() {
-  //   console.log("---beforeMount---")
-  // },
-  //
-  // mounted() {
-  //   console.log("---mounted---")
-  // },
-  //
-  // beforeUpdate() {
-  //   console.log("---beforeUpdate---")
-  // },
-  //
-  // updated() {
-  //   console.log("---updated---")
-  // },
-  //
-  // beforeUnmount() {
-  //   console.log("---beforeUnmount---")
-  // },
-  //
-  // unmounted() {
-  //   console.log("---unmounted---")
-  // }
-
 }
 </script>

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

@@ -0,0 +1,24 @@
+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
+}