Vue3中的Composables组合式函数,Vue3实现minxins-CFANZ编程社区

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 (或Vue3optionsApi写法) minxins混入器案例很直观的看出缺点:

当使用了多个minxins时, property来自哪个 mixin变得不清晰,这使追溯实现和理解组件行为变得困难。
命名冲突会覆盖。
隐式的跨 minxin交流:多个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
<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功能的优点:

当使用了多个组合式封装的属性时,追溯来源清晰明了。
命名冲突会直接提示命名重复了的异常。
不存在 Vue2那种隐式的跨 minxin交流,因为页面引用了重复变量直接会提示。
默认使用TS,类型推断当然存在优势。
使用函函数式编程, 函数内部的变量在打包的时候,压缩器会把函数内部的变量压成 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>

Vue3中的Composables是什么官方文档地址: <https://vuejs.org/guide/reusability/composables.html> Vue3使用类Hooks的函数式编程有什么优点 # 尤雨溪 19年的视频有说到过(22:58时间处) <https://www.bilibili.com/video/BV1K4411N7u3?spm_id_from=333.999.header_right.fav_list.click&vd_source=7e59139d8d4ca4b7a100d53ee1cf711f>