关于vue3:Vue3中的Composables组合式函数Vue3实现minxins

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混入器案例很直观的看出 毛病:

1. 当应用了多个minxins时, property来自哪个 mixin变得不清晰,这使追溯实现和了解组件行为变得艰难。
2. 命名抵触会笼罩。
3. 隐式的跨 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性能的 长处:

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>

Vue3中的Composables是什么 官网文档地址: https://vuejs.org/guide/reusa…

Vue3应用类Hooks的函数式编程有什么长处 # 尤雨溪 19年的视频有说到过(22:58工夫处) https://www.bilibili.com/vide…