vue3自定义hook函数

Author: Panyue-genkiyo

12_src_自定义hook函数/App.vue

@@ -0,0 +1,34 @@
+<template>
+  <!--vue3的组件模版结构可以没有根标签-->
+  <button @click="isShowDemo = !isShowDemo">{{ isShowDemo ? '隐藏' : '显示'}}</button>
+  <Demo v-if="isShowDemo"/>
+  <hr/>
+  <Test/>
+</template>
+
+<script>
+import Demo from "./components/Demo";
+import Test from "./components/Test";
+import { ref } from "vue";
+export default {
+  name: 'App',
+  components: {Demo, Test},
+  setup(){
+    let isShowDemo = ref(true);
+    return {
+      isShowDemo
+    }
+  }
+}
+</script>
+
+<style>
+#app {
+  font-family: Avenir, Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-align: center;
+  color: #2c3e50;
+  margin-top: 60px;
+}
+</style>

12_src_自定义hook函数/components/Demo.vue

@@ -0,0 +1,29 @@
+<template>
+   <h1>当前求和为:{{ sum }}</h1>
+   <button @click="sum++">点我加一</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(){
+    let sum = ref(0);
+
+    //复用自定义hooks
+    const point = usePoint();
+
+    //返回一个对象
+    return {
+      sum,
+      point
+    }
+  },
+}
+</script>
+
+<style>
+</style>

12_src_自定义hook函数/components/Test.vue

@@ -0,0 +1,22 @@
+<template>
+   <h2>我是test组件</h2>
+   <h3>{{ point }}</h3>
+</template>
+
+<script>
+import usePoint from "../hooks/usePoint";
+
+export default {
+  name: "Test",
+  setup(){
+    const point = usePoint(); //复用打点hook(封装数据以及其要用的生命周期钩子) 组合式api的好处
+    return {
+      point
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

12_src_自定义hook函数/hooks/usePoint.js

@@ -0,0 +1,30 @@
+///得到鼠标点的api
+
+import { reactive, onMounted, onBeforeUnmount } from "vue";
+
+export default function usePoint(){
+    //响应式数据
+    let point = reactive({
+        x: 0,
+        y: 0
+    });
+
+    //方法
+    const savePoint = event => {
+        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;
+}

12_src_自定义hook函数/main.js

@@ -0,0 +1,20 @@
+//引入不再是Vue构造函数了，引入的是一个名为createApp的工厂函数
+//注意在这里无法像vue2那样去书写了，(这里并不兼容)
+import { createApp } from 'vue'
+import App from './App.vue'
+
+//创建应用实例对象---app类似于vue2中vm,但app比vm更轻
+const app = createApp(App);
+// console.log(app);
+//挂载
+app.mount('#app');
+
+// setTimeout(() => {
+//     app.unmount("#app");
+// },2000)
+
+// //vue2写法
+// const vm = new Vue({
+//     render: h=> h(App)
+// });
+// vm.$mount('#app')