什么是hook、mixin？

mixin:

Vue2中多个组件内存在重复JS业务逻辑，使用mixin将重复逻辑的代码进行抽离，实现代码的复用，避免代码冗余。

hook:

本质是一个函数，将setup中使用的组合式Api按功能进行封装，同时也能实现代码的复用。

怎样去使用mixin、hook?

mixin的使用：

（1）在src文件夹中创建mixins文件夹，在里面去写对应的mixin.js文件

（2）抽离要复用的代码

  data(){return {}},methods:{},computed:{},filters:{},created(){},mounted(){console.log("我是mixins");}
}

（3）最后在要使用的组件中进行引入

import引入抽离模块的js，然后配合mixins配置(值为一个数组)进行使用。

hook的使用

(1)在src文件夹中创建hooks文件夹，在里面去写对应的hook.js文件

(2)然后再hook.js文件中编写js程序

import { reactive, onMounted, onBeforeUnmount } from "@vue/runtime-core";
export default function () {//想要去实现代码的复用，方法是！！！！hook函数//实现鼠标打点相关的数据let point = reactive({x: 0,y: 0,});//实现鼠标打点的方法function savepoint(event) {point.x = event.pageX;point.y = event.pageY;}onMounted(() => {window.addEventListener("click", savepoint);});//当组件卸载的时候就去移除这个函数onBeforeUnmount(() => {window.removeEventListener("click", savepoint);});return point;
}

(3)最后再使用该功能的文件中进行引入

对比优缺点

mixin：

特性：

mixins中的生命周期会与使用mixins的组件的自带的生命周期在一起调用，mixins中的生命周期函数会比引入mixins的组件调用的快。
组件的data、methods、filters会覆盖mixins里的同名data、methods、filters。
.不同mixin里的同名方法，按照引进的顺序，最后的覆盖前面的同名方法。

缺点：

变量来源不明确（隐式传入），不利于阅读，使代码变得难以维护
多个mixins的生命周期会融合到一起运行，但是同名属性、同名方法无法融合，可能会导致冲突或覆盖。
mixins和组件可能出现多对多的关系，复杂度较高

hook

（相较于mixin的优点）

Hook引入变量和方法是显示传入，能清楚的知道变量和方法的数据来源。
使用Hook函数时，因为变量和函数是显示引用，我们就可以通过解构赋值，来避免函数和变量重名现象。

最后，两个可以混搭但是不建议!

hook与mixin相关推荐

Vue3究竟好在哪里？
前言这几天 Vue 3.0 Beta 版本发布了,本以为是皆大欢喜的一件事情,但是论坛里还是看到了很多反对的声音.主流的反对论点大概有如下几点: 意大利面代码结构吐槽: "太失望了.杂七杂 ...
Vue 3.0 到底好在哪里？(尤雨溪点赞文)
前言这几天 Vue 3.0 Beta 版本发布了,本以为是皆大欢喜的一件事情,但是论坛里还是看到了很多反对的声音.主流的反对论点大概有如下几点: 意大利面代码结构吐槽: "太失望了.杂七杂 ...
Vue 3.0 这个迷人的小妖精，到底好在哪里？
前言这几天 Vue 3.0 Beta 版本发布了,本以为是皆大欢喜的一件事情,但是论坛里还是看到了很多反对的声音.主流的反对论点大概有如下几点: 意大利面代码结构吐槽: "太失望了.杂七杂 ...
vue3的技术使用（部分）
注:本文章主旨对于新入门的伙伴,在vue2的基础上对vue3的使用有一定的理解和使用. 介绍: 在vue3中,不需要根标签div 如图: <template><div @click= ...
vue-Mixis的理解与应用
1. Mixis 是什么混合 (mixins) 是一种 Vue 组件中可复用功能的非常灵活的方式. 混合对象可以包含任意组件选项. 当组件使用混合对象时,所有混合对象的选项将被混入该组件本身的选项. ...
源码解析 React Hook 构建过程
2018 年的 React Conf 上 Dan Abramov 正式对外介绍了React Hook,这是一种让函数组件支持状态和其他 React 特性的全新方式,并被官方解读为这是下一个 5 年 R ...
三、vue3--生命周期、Hook函数、 toRef和toRefs、其他的组合式API
1.生命周期 vue2中的写法,在vue3中依然可以这么写. 注意beforeDestroy在vue3变成了beforeUnmount,destroyed变成了unmounted export def ...
Vue 源码之 mixin 原理
mixin的意思是混入,是指将事先配置的选项混入到组件中,然后与组件中的对象和方法进行合并,也就是对组件进行了扩展,也可以理解为是将一段重复的代码进行抽离,然后通过混入的形式达到复用的效果,它有两种混 ...
vue2中的mixin
mixin的用处:主要用于多个组件内存在重复JS业务逻辑(可以包括methods,mounted,watch等等),将该JS部分代码封装在一个js文件下对外暴露,需要使用的组件进行引用. 混入 (mi ...

hook与mixin