浅谈hooks
hooks 作为一个vue与react目前两大最热门框架中提出的新的一种概念,hooks到底是什么呢?hooks为何现在被运用广泛?
1、hooks到底是什么呢
钩子编程(hooking) 是计算机程序设计术语, 通过拦截软件模块间的函数调用、消息传递、事件传递来修改或扩展操作系统、应用程序或其他软件组件的行为的各种技术。处理被拦截的函数调用、事件、消息的代码,被称为钩子(hook)。
hooks其实是一种思想,并结合函数式编程的一种新的技术运用方式,在react中我们可以更好,更直观的感受到hooks带来的改变,早期的react 我们大多使用createElement的方式,可以更好的获取并处理业务代码,函数式编程运用场景很有局限性,但是随着react16.8之后出现各式各样的hooks语法糖,我们可以很便捷并且很轻量的实现一个组件,
同样的现在vue3中推荐使用组合式 Api, 也就是由之前的类编程转换为函数式编程,由 setup 作为组合式 API 的入口点。作为函数式编程 Hooks 是必不可少的
2.hook的大概原理
3.hooks帮助我们解决了什么问题呢?
1.高内聚低耦合,充分解耦业务代码的复杂性,可读性更高
2.业务代码结构清晰且明了
3.可复用性更高
4.数据剥离,调用两次hooks,代表着两份完全独立的数据,减少数据污染的可能性
5.使用方便,难度低,充分代替mixin,变量来源不明确(隐式传入),不利于阅读,使代码变得难以维护,
6.多个 mixins 的生命周期会融合到一起运行,但是同名属性、同名方法无法融合,可能会导致冲突
4.在vue3中如何去封装一个hooks的公共组件呢?
4.1 在之前的vue2中我们封装一个组件是这样的
// child
<template><div>xxx</div>
</template>
<script>
exprot deafult { props: {}
}
</script>