Vue3: 知识总结: hooks(是函数形式)

Vue3 的 hook函数相当于 vue2 的 mixin, 不同在与 hooks 是函数Vue3 的 hook函数可以帮助我们提高代码的复用性, 让我们能在不同的组件中都利用 hooks 函数例子 :首先在src目录下建立一个 hooks 文件夹申明一个我们要复用的方法的名字.ts 文件下面是 useMousePosition.ts 代码import {onBeforeUnmount, on

爱吃鸡蛋的程序员

20817人浏览 · 2021-02-23 17:00:52

爱吃鸡蛋的程序员 · 2021-02-23 17:00:52 发布

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

例子 :

首先在src目录下建立一个 hooks 文件夹
申明一个我们要复用的方法的名字.ts 文件

在这里插入图片描述
下面是 useMousePosition.ts 代码

import {onBeforeUnmount, onMounted, ref} from 'vue
export default function () {
	const x = ref(-1) ; // x 绑定为响应式数据
	const y = ref(-1);
	const clickHandler=(event:MouseEvent)=>{
		x.value = event.pageX
		y.value = event.pageY
	} 
	onMounted(()=>{
		window.addEventListener('click', clickHandlker)
	})
	onBeforeUnmount(()=>{
		window.removeEventListner('click', clickHandler)
	})
	return {
		x,
		y
	}
}

下面是 App.vue组件使用我们的 userMousePosition 这个 hooks 方法

<template>
<div>
  <h2>x: {{x}}, y: {{y}}</h2>
</div>
</template>

<script>

import {
  ref
} from "vue"
/* 
在组件中引入并使用自定义hook
自定义hook的作用类似于vue2中的mixin技术
自定义Hook的优势: 很清楚复用功能代码的来源, 更清楚易懂
*/
import useMousePosition from './hooks/useMousePosition'

export default {
  setup() {

    const {x, y} = useMousePosition() // 这里就用了 hooks 函数, 从而提高了复用性

    return {
      x,
      y,
    }
  }
}
</script>