如何全面掌握vue.js hooks的核心概念与用法？

本文共计2713个文字，预计阅读时间需要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相关的特性非常明智。

vue-hooks

在探究vue-hooks之前，先粗略的回顾一下vue的响应式系统：首先，vue组件初始化时会将挂载在data上的属性响应式处理（挂载依赖管理器），然后模版编译成v-dom的过程中，实例化一个Watcher观察者观察整个比对后的vnode，同时也会访问这些依赖的属性，触发依赖管理器收集依赖（与Watcher观察者建立关联）。