vue3中的自定义hooks的使用，以及和mixin的区别

1、理解hooks的概念：hook本质是一个函数，将setup函数中使用的Composition API进行封装，类似于Vue2中的mixin

2、mixin相比hook的缺点 ：

（1）变量来源不明确（隐式传入），不利于阅读，使代码变得难以维护

（2）同名属性、同名方法无法融合，可能会导致冲突

3、

例一：

第一步：在src/hooks/index.js文件：

import { reactive } from "vue";

export function useVwSize() { //use开头创建hook

  const data = reactive({

    width: 0,

    height:0

  })

  const getViewportSize = () => {

    data.width = document.body.clientWidth;

    data.height = document.body.clientHeight;

  }

  return {

    data,getViewportSize  //return出共用变量和方法

  }

}

第二步：index.vue 使用hooks

<script setup lang="ts">

import { useVwSize } from "@/hooks"; //引入hook

const { data, getViewportSize } = useVwSize(); //调用hoook

</script>

<template>

  <button @click="getViewportSize">获取窗口大小</button> //直接使用hook返回的函数

  <div>

    <div>宽度 ： {{ data.width }}</div> //直接使用hook返回的变量

    <div>宽度 ： {{ data.height }}</div>

  </div>

</template>