Vue3：组合式函数（引入外部ts文件，修改外部ts参数）

1. 组合式函数

        在 Vue 应用的概念中，“组合式函数”(Composables) 是一个利用 Vue 的组合式 API 来封装和复用有状态逻辑的函数。更为复杂的业务逻辑可以使用store来处理

        vue3中不在推荐使用mixins，在 Vue 2 中，mixins 是创建可重用组件逻辑的主要方式。尽管在 Vue 3 中保留了 mixins 支持，但对于组件间的逻辑复用，Composition API 是现在更推荐的方式。

        在不使用mixins的情况下，外部js无法调用vue页面中参数，所以我们需要调用方法或者调用ts中的参数时。需要通过export 将参数和方法暴露出来。在外部的ts文件中我们可以使用vue的API，例如：onMounted,onUnmounted...

如图：  

      

 2.Vue页面

<template>
  <div class="home">
    <div>调用外部js：{{addNum}}</div>
    <button @click="clickAdd">加</button>
    <div>改变外部js参数:{{count}}</div>
    <button @click="clickChange">修改</button>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue';
import { add, accept } from './child'
const addNum = ref(add())
const count = ref(accept(12))
const clickAdd = () => {
  addNum.value = add()
}
const clickChange = () => {
  count.value = accept(Math.floor(Math.random() * 10 + 1))
}

</script>

3.外部js

import { reactive, ref } from 'vue';
const count = ref(0);
const addNum = ref(0);
const accept = (data: any) => {
  return (count.value = data);
};
const add = () => {
  return addNum.value++;
};
export { add, accept };

4.和 Mixin 的对比

        mixins 有三个主要的短板：

                

1. 不清晰的数据来源：当使用了多个 mixin 时，实例上的数据属性来自哪个 mixin 变得不清晰，这使追溯实现和理解组件行为变得困难。这也是我们推荐在组合式函数中使用 ref + 解构模式的理由：让属性的来源在消费组件时一目了然。

2. 命名空间冲突：多个来自不同作者的 mixin 可能会注册相同的属性名，造成命名冲突。若使用组合式函数，你可以通过在解构变量时对变量进行重命名来避免相同的键名。

3. 隐式的跨 mixin 交流：多个 mixin 需要依赖共享的属性名来进行相互作用，这使得它们隐性地耦合在一起。而一个组合式函数的返回值可以作为另一个组合式函数的参数被传入，像普通函数那样。