Vue3 的 hook函数

奋斗吧

擅长邻域：未填写

2023-07-10 18:24:21 116浏览

Vue3 的 hook函数，Vue3的hook函数相当于vue2的mixin,不同在于hooks是函数；Vue3的hook函数可以帮助我们提高代码的复用性,让我们能在不同的组件中都利用hooks函数；其实就是代码的复用，可以用到外部的数据，生命钩子函数...，具体怎么用直接看代码，//一般都是建一个hooks文件夹，都写在里面import{reactive,onMounted,onBefor

Vue3 的 hook函数相当于 vue2 的 mixin, 不同在于 hooks 是函数；
Vue3 的 hook函数可以帮助我们提高代码的复用性, 让我们能在不同的组件中都利用 hooks 函数；

其实就是代码的复用，可以用到外部的数据，生命钩子函数...，具体怎么用直接看代码，

//一般都是建一个hooks文件夹，都写在里面
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
}


//在其他地方调用
import useMousePosition from './hooks/useMousePosition'
let point = useMousePosition（）

好博客就要一起分享哦！分享海报

此处可发布评论

评论（0）展开评论

暂无评论，快来写一下吧

展开评论

您可能感兴趣的博客