什么是hooks,vue2的hooks与vue3的hooks有什么区别
发布于2024-03-18 15:45 阅读 234
什么是hooks
hook是钩子的意思,看到“钩子”是不是就想到了钩子函数?事实上,hooks 还真是函数的一种写法。
vue3 借鉴 react hooks 开发出了 Composition API ,所以也就意味着 Composition API 也能进行自定义封装 hooks。
vue3 中的 hooks 就是函数的一种写法,就是将文件的一些单独功能的js代码进行抽离出来,放到单独的js文件中,或者说是提取一些可以复用的公共方法/功能。
其实 hooks 和 vue2 中的 mixin 有点类似,但是相对 mixins 而言, hooks 更清楚复用功能代码的来源, 更清晰易懂。
Mixin和Hooks区别
假设有个需求:
当组件实例创建时,需要创建一个 state 属性:name,并随机给此 name 属性附一个初始值。除此之外,还得提供一个 setName 方法。你可以在组件其他地方开销和修改此状态属性。
更重要的是: 这个逻辑要可以复用,在各种业务组件里复用这个逻辑。 在拥有hooks之前,首先想到的就是Mixin;而Mixin也有它的弊端:
比如:
1.会出现覆盖,同名,名字混合
2.无法传入参数,限制了Mixin的灵活性
相比之下vue3的hooks通过导出/导入,在使用的时候直接引入响应的方法就可以使用了,非常方便;
评论
全部评论
{{reply.username}} 回复:{{reply.replyname}}
{{reply.content}}