vue3.0 + ts 引入 vueuse

「这是我参与2022首次更文挑战的第8天，活动详情查看：2022首次更文挑战」

背景

随着vue3.0+ 的推出，和应用Vue 3.0的项目越来越多，vue3.0中增加了composition api这一大特性。 当我们开发哪个功能需要再其他组件被复用的时候，直接把相关的方法提取出去，然后再引用进来就可以了，可以看出composition api的面向人群主要是经常写轮子或者框架的开发者，因为它更灵活，可以写出高内聚、低耦合的代码。

所以我们接下来讲的VueUse就在这种环境下诞生了。

VueUse是什么？

VueUse 是一个基于Composition API(组合API)的实用函数集合。

VueUse优点

• 有很好的交互式文档和演示。
•  适用于Vue 3.+ 和 vue 2.+。
• 可以按需引入也可以全局引入。
• 用Typescript 编写，运用TS Docs规范，所以它是支持Typescript的。
• 同样它支持SSR,服务器渲染。
• 无需打包，可以通过CDN引用。
• 可配置的事件过滤器和目标。
• 可选扩展：Router、Firebase、RxJS 等。

VueUse 地址

github: github.com/vueuse/vueu…

npmjs: www.npmjs.com/package/@vu…

文档： vueuse.org/guide/compo…

技术

• vueuse/core
• vueuse/components

安装

npm i @vueuse/core

安装好后package.json文件会多一行"@vueuse/core": "^7.5.4",，效果如下：

实现

vue页面引入组件，我们的demo就引入useMouse作为尝试。代码如下：

方法一：

1. 引入useMouse

import { reactive, defineComponent } from "vue";
import { useMouse } from "@vueuse/core";

2. 注册useMouse

export default defineComponent({
  name: "Lantern",
  setup() {
    const mouse = reactive(useMouse());
    return {
      mouse,
    };
  },
});

3. 渲染mouse

    <div class="home">mouseX:{{ mouse.x }} mouseY:{{ mouse.y }}</div>

4. 效果如下：

可以看见，当我们移动鼠标的时候x和y的值也在变化。vueuse还提供了@vueuse/components,我们可以用组件的方式来引用。

方法二：

1. 安装@vueuse/components

npm i @vueuse/components @vueuse/core

2. 引入 UseMouse

import { UseMouse } from "@vueuse/components";

3. 注册 UseMouse

export default defineComponent({
  name: "Home",
  props: {},
  components: {
    UseMouse,
  },
});

4. 渲染组件UseMouse

<UseMouse v-slot="{ x, y }"> x: {{ x }} y: {{ y }} </UseMouse>

5.效果如下：

可以看见，当我们移动鼠标的时候x和y的值也在变化。这种方法引用也很方便。

思考

使用vueuse可以使我们的代码更灵活，可以写出高内聚、低耦合的代码。避免大量的重复代码，代码更加通俗易懂。有了vueuse可以是我们vue使用者更加灵活，入门更加低了。这个好的插件在2022年会越来越火的，我们大家可以用起来！！！我个人觉得vueuse将会是一种趋势，一种潮流，2022年发展的方向。