学习Vue3 第二十八章(自定义Hooks)

lxf2024-04-04 03:26:59

  Vue3 自定义Hook

  主要用来处理复用代码逻辑的一些封装

  这个在vue2 就已经有一个东西是Mixins

  mixins就是将这些多个相同的逻辑抽离出来,各个组件只需要引入mixins,就能实现一次写代码,多组件受益的效果。

  弊端就是 会涉及到覆盖的问题

  组件的data、methods、filters会覆盖mixins里的同名data、methods、filters。

  学习Vue3 第二十八章(自定义Hooks)

  第二点就是 变量来源不明确(隐式传入),不利于阅读,使代码变得难以维护。

  Vue3 的自定义的hook

  Vue3 hook 库Get Started | VueUse

  案例

  自定义指令 + hooks 双管齐下

  实现一个监听元素变化的hook

  主要会用到一个新的API resizeObserver  兼容性一般 可以做polyfill

  但是他可以监听元素的变化 执行回调函数 返回 contentRect 里面有变化之后的宽高。