宜宾网站建设公司

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

背景

成都创新互联主营阿巴嘎网站建设的网络公司,主营网站建设方案,成都app软件开发,阿巴嘎h5微信小程序搭建,阿巴嘎网站营销推广欢迎阿巴嘎等地区企业咨询

最近研究了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
}
}
}

本文名称：深度了解vue.js中hooks的相关知识-创新互联
链接URL：http://ybzwz.com/article/cdopse.html

其他资讯