vueuse 初步了解

印姆巴尔士
1,238 阅读4分钟

vueuse 初步了解

本文只用于个人学习记录(以及锻炼口才) 前端增删改查员一枚

最近开始用 Vue3 开发项目了

意料之中, 已有很多大佬开发了 Vue 相关的库(崇拜), 例如 vueuse 和 vue-request 等

感叹大佬们对于新技术的敏锐之余, 想学习一下大佬的思维

  1. 打开 vueuse 的 github

  2. 进入到 packages/core 目录

  3. 东西有点多, 作为菜鸟, 找到了看起来比较面熟的东西, useWindowSize

image.png

  1. 代码分(浅)析(读)
/**
    *逻辑还是很鲜明的
    *诉求是得到一个响应式的 window 的尺寸数据
    *本质上是一个函数
    *接收参数为 window 对象, 初始宽度, 及初始高度
*/
export function useWindowSize({
  window = defaultWindow,
  initialWidth = Infinity,
  initialHeight = Infinity
}: WindowSizeOptions = {}) {
/**
    声明两个响应式变量, 一个宽度, 一个高度
*/
  const width = ref(initialWidth);
  const height = ref(initialHeight);
/**
    声明一个更新方法, api 来源为 window 对象的 innerWidth innerHeight
*/
  const update = () => {
    if (window) {
      width.value = window.innerWidth;
      height.value = window.innerHeight;
    }
  };
/**
    不管三七二十一, 进来先执行一遍
*/
  update();
/**
    mounted 可能引起dom变化, 再执行一遍
*/
  tryOnMounted(update);
/**
    响应式数据的更新, 对于 window 的 size 来说, 更新时机便是 resize
*/
  useEventListener("resize", update, { passive: true });

  return { width, height };
}

  1. tryOnMounted 与 useEventListener 开源库里有这些公共方法或者可以复用的逻辑已经不稀奇了, 阅读特定的代码时候, 感觉先理解语义即可, 如果遇到一个就进去看, 会耗费很多时间和精力, 下次再看

  2. 假如不用 useWindowSize, 如何实现相同的逻辑, 我们需要自己去书写更新时机, 无论是用单独的js文件, 还是直接在组件中书写, 一方面这与响应式的开发方式有冲突, 一方面会让代码非常的不优雅. 将这些逻辑放在一个单独的文件里管理, 并且可以响应式, 会让业务代码更加的纯粹.

个人分析

上面可以看出 useWindowSize 的逻辑还是很清晰易懂的

感谢大佬们的开发, 可以帮助我们打开视野, 凿壁借光的感觉

那么拿来直接用的我, 会思考一些问题

为什么要用

自从 hooks 或者 vue 这种类 hooks 的代码组织方式出现以后, 有的人为用而用(卷), 有的人为了应付面试而用, 但我觉得我们应该真正的去了解这种方式的哲学(), Vue官方文档 中提到的组合式 api 的用意, 以及目前这些开源库的使用方式, 是否存在滥用或者为用而用的可能性

hooks 是什么

  1. 一种新的语法 ?
  2. 一种新的代码组织方式 ?
  3. 一种趋势 ?
  4. 可以加工资 ?

从我个人的浅显理解, 它应该是一个黑盒, 上面有我们可以读取到的 数据(响应式的), 以及我们可以去 操作这些数据的 开关, 有点像 响应式版的 class

组件 和 hooks的关系

个人觉得

两个概念

hooks 是逻辑, 是抽象

hooks 也可以是 utils, 但 hooks 只能在 setup 中使用, 无法完全取代 utils

组件则是完整的小应用, 通常包含 dom 结构

组件里包含逻辑, 但是无法脱离组件使用

组件现在可以用 hooks 管理逻辑, 这部分逻辑脱离组件也可以使用

hooks 无法替代组件, hooks 可以是为组件, 为应用更好的服务

hooks 会带来什么

  1. 在 Vue 中, 以往 选项式 的 .vue 文件(或者用 render 函数书写的 js)中, data 中的 变量, methods 中的方法, 其实是相对扁平的, 不太需要考虑一些先后顺序, 而在 hooks 中, 似乎有一些回归到了 最初的 js 方式, 你需要注意那些 变量或者方法 依赖于 之前的变量(简单来说谁在前谁在后), 对 Vue 开发者提出了更高的要求

  2. hooks 可以某种程度打通 Vue 使用者 和 React 使用者之间的壁垒(当然是某种程度), 之前使用过 React hooks 的开发者可以很好地理解并且适应 Vue 的新玩法(如果他(她)们有兴趣的话), 而使用了 Vue 的新用法的开发者, 则在面对 React hooks 时候, 也不会那么手足无措.

  3. hooks 会带来更多的 以 hooks 为标准的开源框架, vue-router 和 vuex (或 pinia) 会相应的去适应这种趋势

  4. hooks 也会带来一些不良使用, 在阅读某些开源代码的时候, 能感觉到因为过分的使用hooks 导致的代码结构非常混乱, hooks 里面又引入了 别的hooks, 别的 hooks 里又引入了 别的 hooks, 我愿称之为 hooks 地狱, hooks乱纪元...

  5. hooks 势必会带来新的面试标准, 和考核内容, 我已经想到了 若干关于 为什么可以这样, 又为什么可以这样的问题了

avatar
文章
阅读
粉丝