vue3之hook

小刘同学
394 阅读2分钟

vue3的hook类似vue2的mixins, 可以抽取vue重复的逻辑代码， 公用同一个组件实例，生命周期会并在一个生命周期hook里。一个功能的迭代那应该就意味着解决了之前功能存在的一些痛点。

vue mixins痛点

  1. 不可知性。
// 之前的用法
// mixins 组件
export const mixins={
    components:{},
    data(){
        return {}
    },
    created () {},
    computed:{},
    methods:{}
}
// 使用

import {mixins} from "**/mixins.vue"

export default {
   mixins: ['mixins'] 
}

使用的时候只能看见它被引入进来，作为使用者并不清楚它内部都做了些什么工作。

  1. 名称重复会被覆盖。

引入的mixins和当前组件this都指向当前组件实例，内部数据共同两边通过this可以互相拿到，如果两部分变量或者函数有名称重复的，mxins里面的会被覆盖。

  1. (1. + 2.) * n

当你一个组件引入多个mixins, 管理起来就会更加复杂。

hook使用

官方示例

import { ref, onMounted, onUnmounted } from 'vue';
export function ex(width: number, height: number) {
  const x = ref(0);
  const y = ref(0);

  function update(e: MouseEvent) {
    x.value = e.pageX - width;
    y.value = e.pageY - height;
  }

  onMounted(() => {
    window.addEventListener('mousemove', update);
  });

  onUnmounted(() => {
    window.removeEventListener('mousemove', update);
  });

  return { x, y };
}

<template>
    <div>{{ x }} + {{ y }}</div>
</template>

<script lang="ts" setup>
import { ex } from '@/cusHooks/ex';
const {x, y} = ex(10, 20);
</script>

对比mixins痛点

  1. 函数式，拿到自己想要的值去处理业务就可以了，不用管内部做了些什么

  2. 命名重复，独立的作用域。再者setup是在beforeCreate之前的生命周期，本身就不用this取值。

  3. 多个hook之间的管理, 各自独立所以不需要特别的管理，如果需要数据互通，就需要通过导出和传参了。

import HC1 from '**/HC1';
import HC2 from '**/HC2';
const val = ref(0)
const val1 = HC1(val);
const val2 = HC1(val1, val);

对比总结

上面简单列了一下hook解决的mixins一些痛点，本文的侧重点在讲hook，所以也并不是mixins完全不好用, 根据不同的需求甄别使用。比如我之前的一个音视频的业务。 同一个功能要展示在web和小程序里（用webview展示h5）。我所有的业务逻辑或者整个 script内容 都摘出去都放在一个mixins。 写两个组件用于不同端的展示， 里面只放h5和css，还是很香的。

通过示例观察个人感觉，hook并不是vue3推出的api, 类似一个衍生品，基于强大的底层发掘出更有意思的用法。

avatar
文章
阅读
粉丝