Vue3 自定义Hook
主要用来处理复用代码逻辑的一些封装
这个在vue2 就已经有一个东西是Mixins
mixins就是将这些多个相同的逻辑抽离出来,各个组件只需要引入mixins,就能实现一次写代码,多组件受益的效果。
弊端就是 会涉及到覆盖的问题
组件的data、methods、filters会覆盖mixins里的同名data、methods、filters。
第二点就是 变量来源不明确(隐式传入),不利于阅读,使代码变得难以维护。
Vue3 的自定义的hook
Vue3 hook 库Get Started | VueUse
案例
自定义指令 + hooks 双管齐下
实现一个监听元素变化的hook
主要会用到一个新的API resizeObserver 兼容性一般 可以做polyfill
但是他可以监听元素的变化 执行回调函数 返回 contentRect 里面有变化之后的宽高。