关于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…