vue3知识点：自定义hook函数

文章目录

• ​​二、常用 Composition API​​

• ​​9.自定义hook函数​​

• ​​案例：页面打印鼠标滑动坐标​​
• ​​项目代码​​

• ​​本人其他相关文章链接​​

二、常用 Composition API

问题：啥叫“组合式API”？

答案：请看官方文档: ​​ https://v3.cn.vuejs.org/guide/composition-api-introduction.html​​

9.自定义hook函数

注意点1：

创建hooks文件夹，把每个模块需要封装的代码封装到一个js文件中，这样的好处是组件中看着很清爽，只管引入和调用即可，具体hook如何实现那是别人负责的，当前组件只管引入使用即可。

使用步骤：
1）封装每个模块的hook函数的js文件
2）组件中import引入hook函数
3）return中进行返回设置
4）页面模板中直接引用即可

案例：页面打印鼠标滑动坐标

项目代码

项目目录

main.js

//引入的不再是Vue构造函数了，引入的是一个名为createApp的工厂函数
import { createApp } from 'vue'
import App from './App.vue'

//创建应用实例对象——app(类似于之前Vue2中的vm，但app比vm更“轻”)
const app = createApp(App)

//挂载
app.mount('#app')

App.vue

<template>
  <button @click="isShowDemo = !isShowDemo">切换隐藏/显示</button>
  <Demo v-if="isShowDemo"/>
</template>

<script>
  import {ref} from 'vue'
  import Demo from './components/Demo'
  export default {
    name: 'App',
    components:{Demo},
    setup() {
      let isShowDemo = ref(true)
      return {isShowDemo}
    }
  }
</script>

usePoint.js

import {reactive,onMounted,onBeforeUnmount} from 'vue'
export default function (){
  //实现鼠标“打点”相关的数据
  let point = reactive({
    x:0,
    y:0
  })

  //实现鼠标“打点”相关的方法
  function savePoint(event){
    point.x = event.pageX
    point.y = event.pageY
    console.log(event.pageX,event.pageY)
  }

  //实现鼠标“打点”相关的生命周期钩子
  onMounted(()=>{
    window.addEventListener('click',savePoint)
  })

  onBeforeUnmount(()=>{
    window.removeEventListener('click',savePoint)
  })

  return point
}

Demo.vue

<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(){
      //数据
      let sum = ref(0)
      let point = usePoint()
      

      //返回一个对象（常用）
      return {sum,point}
    }
  }
</script>

结果展示

本人其他相关文章链接

1.​​《vue3第二章》常用组合式 Composition API，包括setup、ref函数、reactive函数、vue3.0中的响应式原理、计算属性与监听属性​​ 2.vue3知识点：setup
3.vue3知识点：ref函数
4.vue3知识点：reactive函数
5.vue3知识点：Vue3.0中的响应式原理和 vue2.x的响应式
6.vue3知识点：reactive对比ref
7.vue3知识点：计算属性与监视属性
8.vue3知识点：生命周期
9.vue3知识点：自定义hook函数
10.vue3知识点：toRef函数和toRefs函数