Vue.js中关于hooks的深入理解，有哪些细节和技巧是新手容易忽视的？

本文共计2716个文字，预计阅读时间需要11分钟。

背景：近期研究了Vue 3.0的最新进展。

发现：变化非常大，总体上看，Vue也开始向hooks靠拢。

Vue作者本人也表示Vue 3.0的特性吸引了大量hooks的灵感。

所以，在Vue 3.0尚未正式发布前，抓紧时间研究。

背景

最近研究了vue3.0的最新进展，发现变动很大，总体上看，vue也开始向hooks靠拢，而且vue作者本人也称vue3.0的特性吸取了很多hooks的灵感。所以趁着vue3.0未正式发布前，抓紧时间研究一下hooks相关的东西。

源码地址：vue-hooks-poc

为什么要用hooks?

首先从class-component/vue-options说起：

• 跨组件代码难以复用
• 大组件，维护困难，颗粒度不好控制，细粒度划分时，组件嵌套存层次太深-影响性能
• 类组件，this不可控，逻辑分散，不容易理解
• mixins具有副作用，逻辑互相嵌套，数据来源不明，且不能互相消费

当一个模版依赖了很多mixin的时候，很容易出现数据来源不清或者命名冲突的问题，而且开发mixins的时候，逻辑及逻辑依赖的属性互相分散且mixin之间不可互相消费。这些都是开发中令人非常痛苦的点，因此，vue3.0中引入hooks相关的特性非常明智。