vue3自定义hooks/可组合函数方式

目录

  • 自定义hooks/可组合函数
    • 1.mixins方式的痛点
    • 2.传统mixins方式示例
    • 3.自定义hooks方式示例
  • vue3(hooks)

    自定义hooks/可组合函数 vue3 composition api下mixins的替代方式(自定义hooks / 可组合函数)
    传统方式下封装的mixins在引入文件里都是通过this来调用属性或方法,
    而在vue3的composition API下this是undefined,实际上这两者就是冲突的,
    只能封装一套全新的方式来使用类似mixins的功能。
    我们称这种全新的方式为自定义hooks(注:写这篇文章时vue官方还没有这个概念,基本靠自己摸索,参照react的习惯而称之为自定义hooks,现在已经有了官方定义:可组合函数)。

    1.mixins方式的痛点
    传统的mixins有很多让人诟病的地方,mixins 的深度合并非常隐式,这让代码逻辑更难理解和调试,具体表现为如下几点:
    • mixins 容易冲突:因为每个特性的属性都被合并到同一个组件中,组件内同名的属性或方法会把mixins里的覆盖掉。
    • 可重用性有限:我们不能向 mixins 传递任何参数来改变它的逻辑,这降低了它们在抽象逻辑方面的灵活性。
    • 数据来源不清晰:组件里所使用的mixins里的数据或方法在当前组件代码里搜索不到,易造成错误的解读,比如被当成错误代码或冗余代码而误删。

    2.传统mixins方式示例
    myMixins.ts:
    export default {data () {return {aa: 1}},mounted () {this.testFn()},methods: {testFn () {console.log('testFn')}}}

    index.vue:

    如上所示,封装的myMixins实际上只做了两件事,一是在mounted钩子函数里执行testFn方法,二是暴露一个aa的变量给外部使用;index.vue里引入后在dom里使用了aa。
    这算是mixins最典型的两个用途,一是自己执行一些公共逻辑,外部引入时不用管,二是定义一些data变量给外部引入后使用。

    3.自定义hooks方式示例
    1、代码封装
    先上代码,myHooks.ts:
    import { ref, onMounted } from 'vue'export default function () {const aa = ref(1)function testFn () {console.log('testFn')}onMounted(() => {testFn()})return {aa}}

    index.vue:

    可以看到,这里没有再使用mixins属性来引入逻辑代码,本质上只是封装了一个ts文件引入使用而已,这样使用后,数据来源清晰可见,代码引用有依有据。
    2、为什么导出的是function
    因为导出为对象的话就意味着在import导入时就执行了封装的逻辑,而我们封装的逻辑是用composition api包装了的的特殊代码,这些代码只能在setup里才能正常使用,所以需要导出一个函数,这样就可以在组件
    setup里调用该函数来指定执行时机。
    导出为function还有一个用途是方便传参,这样可以在不同的组件引用时做一些差异化逻辑处理。
    3、封装建议
    导出的function只需要return组件里要引用的数据;对于组件里不需要引用的就不需要return,组件里只调用导入的函数即可。
    组件里的自定义hooks调用代码最好放在setup里第一行位置,这样比较明确,不容易被遗漏。
    响应式api的使用风格保持统一,其实这也是整个项目风格统一的问题,对于setup里定义的数据做响应式处理,要么都用ref,要么都用reative,保持统一,这样在使用时不至于有的带.value有的不带。

    vue3(hooks) vue3的hooks相当于是封装公共方法的js文件
    /**计数器+-方法的hooks文件**/import { ref } from 'vue'export default function() {const counter = ref(0)const increment = () => {counter.value++}const devrement = () => {counter.value--} return {counter,increment,devrement}}

    引入以及使用方法如下


    【vue3自定义hooks/可组合函数方式】以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

      推荐阅读