[JavaScript知识库]vue3 hooks 代替 mixins

首先要理解什么是 hooks：

vue3中的hooks其实是函数的写法，就是将文件的一些单独功能的js代码进行抽离出来，放到单独的js文件中。这样其实和我们在vue2中学的mixin比较像。下面我们总结一下如何去书写hooks。

以 动态获取 div 高度为例子：

vue2 动态div 高度 见 之前 文章：

https://blog.csdn.net/qq_37167049/article/details/110530443?spm=1001.2014.3001.5502

vue3 写法如下：

首先 创建 vue3 的hooks，文件叫做 useGetheight.ts
hooks文件名 一般 以 use 开头

import { ref, onMounted, onUnmounted,reactive } from "vue";
export function getDynamicHeight(height) {
  const contentStyleObj = reactive({
    height: "",
  });
  const getHeight = () => {
    contentStyleObj.height = window.innerHeight - height + "px";
  };

  onMounted(() => {
    getHeight();
    window.addEventListener("resize", getHeight);
  });

  onUnmounted(() => {
    window.removeEventListener("resize", getHeight);
  });
  return  contentStyleObj ;
}

引入 hooks：

import { getDynamicHeight } from "/@/hooks/utils/useGetHeight.ts";
const contentStyleObj = getDynamicHeight(170);
const contentStyleObj1 = getDynamicHeight(300);

在html 中 使用：

<div :style="contentStyleObj" class="file-height">111111</div>
<div :style="contentStyleObj1" class="file-height">111111</div>

2022深度学习开发者峰会

5月20日13:00让我们相聚云端，共襄盛会！