迷思概念:在 vue 中创建 hooks?谁告诉你 vue 有 hooks 的?

Hello,大家好,我是 Sunday。

经常在网上看到有很多同学说:"在 Vue 中创建 hooks?提升 什么什么什么"

我每次看到这样的概念时都很疑惑:hooks 应该是 react 中的概念呢,什么时候 vue 中也有 hooks 了?

本着不懂就问的态度,我去各大官方文档中搜寻了 vue + hooks 的概念,很遗憾 没有任何一个 vue 官方文档指出 vue 存在 hooks 的说法。

所以咱们今天就来看看:所谓 hooks 到底是啥?vue 中是否存在所谓的 hooks?

01:啥是 hooks?

hook 翻译过来是钩子的意思。hooks 作为复数,直译就是 多个钩子 ,在开发领域中特指 钩子函数

在开发领域,最初的 hook 是和回调钩子绑定的。比如我们常说的 git hooks 指的就是在 git 提交的时候所产生的多个回调钩子函数。

同理,在 vue 有提到 Lifecycle Hooks 的概念,翻译过来就是:生命周期钩子

这也是在 vue 官方文档中唯一和 hooks 有关联的地方了。

所以:hooks 指的仅仅是 回调钩子 而已。

02:React hooks 是什么?

React hooks 的概念最初出现在 react 16.8 (https://github.com/facebook/react/releases/tag/v16.8.0) 中:

如图所示:

React 添加了 hooks 的概念,让我们可以无需编写类组件的情况下使用 state 和其他 React 特性。

后来,随着 hooks 的逐渐发展,react 规定:在 React 中,所有内置的 Hooks 和社区约定的自定义 Hooks 函数都遵循以 use 开头的命名规则

所以 React 中是明确有 hooks 概念的。

03:vue composition API 与 react hooks 的对比

有同学会把 composition API 比作 react hooks,关于这一部分 vue 官方进行了声明

在 vue 官方文档中有这样一段话,我就不把原文列出来了,给大家做一个总结(以下内容来自 https://cn.vuejs.org/guide/extras/composition-api-faq.html#comparison-with-react-hooks 的总结

Vue 的组合式 API 不同于 React hooks。无论从 调用时机、调用限制、依赖管理、性能优化 等问题上均有差异!

所以说:Vue 是没有 hooks 概念的

总结

总体来说:hooks 一般指的是【回调钩子函数】。在 React 中存在 hooks 的明确概念,通常是以 use 开头的函数。但是 Vue 中是没有 hooks 概念的,唯一与之有关联的就是 生命周期回调钩子 了

前端训练营:1v1私教,终身辅导计划,帮你拿到满意的 offer 已帮助数百位同学拿到了中大厂 offer。欢迎来撩~~~~~~~~

相关推荐
2601_949593652 小时前
基础入门 React Native 鸿蒙跨平台开发:卡片组件
react native·react.js·harmonyos
天人合一peng2 小时前
Unity中button 和toggle监听事件函数有无参数
前端·unity·游戏引擎
方也_arkling3 小时前
别名路径联想提示。@/统一文件路径的配置
前端·javascript
毕设源码-朱学姐3 小时前
【开题答辩全过程】以 基于web教师继续教育系统的设计与实现为例,包含答辩的问题和答案
前端
qq_177767373 小时前
React Native鸿蒙跨平台剧集管理应用实现,包含主应用组件、剧集列表、分类筛选、搜索排序等功能模块
javascript·react native·react.js·交互·harmonyos
qq_177767373 小时前
React Native鸿蒙跨平台自定义复选框组件,通过样式数组实现选中/未选中状态的样式切换,使用链式调用替代样式数组,实现状态驱动的样式变化
javascript·react native·react.js·架构·ecmascript·harmonyos·媒体
web打印社区3 小时前
web-print-pdf:突破浏览器限制,实现专业级Web静默打印
前端·javascript·vue.js·electron·html
RFCEO3 小时前
前端编程 课程十三、:CSS核心基础1:CSS选择器
前端·css·css基础选择器详细教程·css类选择器使用方法·css类选择器命名规范·css后代选择器·精准选中嵌套元素
烬头88214 小时前
React Native鸿蒙跨平台采用了函数式组件的形式,通过 props 接收分类数据,使用 TouchableOpacity实现了点击交互效果
javascript·react native·react.js·ecmascript·交互·harmonyos
Amumu121384 小时前
Vuex介绍
前端·javascript·vue.js