Vue3项目如何高效运用hooks进行组件开发？

本文共计1215个文字，预计阅读时间需要5分钟。

目录 + hooks + hooks 特点 + 基本使用 + 今天我们来浅说下 + Vue3 + 项目中的 hooks + 的使用，其实这个 hooks 呢，和 Vue2 当中的 mixin 是类似的功能，学习过 Vue2 的小伙伴一定对 mixin 比较熟悉，那么这个 hooks 呢，也算是一种熟悉的陌生感吧。

目录

• hooks 特点
• hooks 基本使用

今天我们稍微说一下 vue3 项目中的 hooks 的使用，其实这个 hooks 呢是和 vue2 当中的 mixin 是类似的，学习过 vue2 的小伙伴一定对 mixin 一定比较熟悉，就算没用过也一定了解过，也就是混入，通过 mixin 混入来分发 vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。而 vue2 的 hooks 函数与 mixin 混入的区别，主要是 hooks 是函数。

hooks 特点

vue3 中的 hooks 函数相当于 vue2 里面的 mixin 混入，不同在于 hooks 是函数。

vue3 中的 hooks 函数可以提高代码的复用性，能够在不同的组件当中都利用 hooks 函数。

hooks 函数可以与 mixin 连用，但是不建议。

hooks 基本使用

首先我们不管 hooks 哈，我们先写一个小功能，就是获取页面的宽高值，这个是讲解 hooks 的常用案例了，都是老演员了，我们也来整一个。

我不啰嗦了，直接写代码吧。