avatar
Published on

Vue3中的Composables组合式函数

Vue3中的Composables组合式函数

Vue3中的Composables组合式函数

Vue3中的Composables简单理解其实就是类React Hooks式的组合式函数封装方法。Vue官方称为Composables组合式函数。

1. 抽离复用逻辑时

Vue2写法

（1）Vue2中的mixins混入器写法缺点（Vue3 optionsApi写法同理）

新建minxins.js文件案例：

// minxins.js 文件
export default{
    data(){
        return{
            message:'混入对象',
            name:'zhangsan000'
        }
    },
    methods: {
        logMessage() {
            console.log('打印message', this.message);
        }
    }
}

使用组件：

// 使用
import minxins  from "./common/minxins";
import minxins1 from "./common/minxins1"; // 举例
import minxins2 from "./common/minxins2"; // 举例
export default{
    mixins: [minxins, minxins1, minxins2], // 可混入多个文件
    data(){
        return{
             message:'混入对象新的',
             bar:'bar',
 
        }
    },
    created(){
      this.logMessage(); // 打印 '混入对象新的'
      console.log('created组件钩子被调用')
    }, 
}

一个简单Vue2（或Vue3 optionsApi写法）minxins混入器案例很直观地看出缺点：

  1. 当使用了多个minxins时，property来自哪个mixin变得不清晰，这使追溯实现和理解组件行为变得困难。
  2. 命名冲突会覆盖。
  3. 隐式的跨mixin交流：多个minxin需要依赖共享的property键名来进行相互作用，这使得它们隐性地耦合在一起。而一个组合式函数的返回值可以作为另一个组合式函数的参数被传入，像普通函数那样。

（2）Vue3 composition API写法实现minxins类功能

// composables/useHelloWorldData.ts
import { ref, onMounted, onUnmounted } from 'vue'

export function useHelloWorldData() {
    let message = ref<string>('混入对象');
    let name = ref<string>('zhangsan000');
    
    const logMessage = (): void => {
        console.log(message.value);
    };

    onMounted(() => {
    });

    onUnmounted(() => {
    });
    return { message, name, logMessage }
}

使用：

<template>
    <p>{{ message }}</p>
    <p>{{ name }}</p>
</template>

<script setup lang="ts">
import { onMounted } from 'vue'
import { useHelloWorldData } from '../composables/useHelloWorldData';

// let message = ref<string>('混入对象新'); // 异常提示：无法重新声明块范围变量"message"
const { message, name, logMessage } = useHelloWorldData();

onMounted(() => {
    logMessage();
});
</script>

一个简单Vue3 composition API案例，写类Hooks函数（vue3称为组合式函数）实现minxin功能的优点：

  1. 当使用了多个组合式封装的属性时，追溯来源清晰明了。
  2. 命名冲突会直接提示命名重复了的异常。
  3. 不存在Vue2那种隐式的跨minxin交流，因为页面引用了重复变量直接会提示。
  4. 默认使用TS，类型推断当然存在优势。
  5. 使用函数式编程，函数内部的变量在打包的时候，压缩器会把函数内部的变量压成var a,b,c,d之类的。而对象中的属性key值，主流打包工具压缩器没有简化对象key值名字。所以函数式编程打包包体相对会更小一些。

2. 函数式写法功能的扩展组合

既然可以按照React Hooks的类组合式函数方式去写，功能就不仅仅局限在混入器minxin功能上。

官方的简单小案例封装useMouse鼠标位置监听功能：

// event.ts
import { onMounted, onUnmounted } from 'vue'

export function useEventListener(target, event, callback) {
    onMounted(() => target.addEventListener(event, callback))
    onUnmounted(() => target.removeEventListener(event, callback))
}

// useMouse.ts
import { ref } from 'vue'
import { useEventListener } from './event'

export function useMouse() {
    const x = ref<number>(0);
    const y = ref<number>(0);

    useEventListener(window, 'mousemove', (event) => {
        x.value = event.pageX
        y.value = event.pageY
    })

  return { x, y }
}

使用：

<script setup>
import { useMouse } from './useMouse'

const { x, y } = useMouse()
</script>

<template>鼠标位置: {{ x }}, {{ y }}</template>

参考资料