深度了解vue.js中hooks的相关知识-创新互联

背景

最近研究了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观察者建立关联）。当依赖的属性发生变化时，会通知对应的Watcher观察者重新求值（setter->notify->watcher->run），对应到模版中就是重新render(re-render)。

注意：vue内部默认将re-render过程放入微任务队列中，当前的render会在上一次render flush阶段求值。

withHooks

export function withHooks(render) {
return {
data() {
return {
_state: {}
}
},
created() {
this._effectStore = {}
this._refsStore = {}
this._computedStore = {}
},
render(h) {
callIndex = 0
currentInstance = this
isMounting = !this._vnode
const ret = render(h, this.$attrs, this.$props)
currentInstance = null
return ret
}
}
}