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

这篇具有很好参考价值的文章主要介绍了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...

如图：

vue3.0 ts 页面调用 ts,Vue3,vue.js,前端,javascript

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 有三个主要的短板：

不清晰的数据来源：当使用了多个 mixin 时，实例上的数据属性来自哪个 mixin 变得不清晰，这使追溯实现和理解组件行为变得困难。这也是我们推荐在组合式函数中使用 ref + 解构模式的理由：让属性的来源在消费组件时一目了然。
命名空间冲突：多个来自不同作者的 mixin 可能会注册相同的属性名，造成命名冲突。若使用组合式函数，你可以通过在解构变量时对变量进行重命名来避免相同的键名。
隐式的跨 mixin 交流：多个 mixin 需要依赖共享的属性名来进行相互作用，这使得它们隐性地耦合在一起。而一个组合式函数的返回值可以作为另一个组合式函数的参数被传入，像普通函数那样。文章来源地址https://www.toymoban.com/news/detail-615833.html

到了这里，关于Vue3：组合式函数（引入外部ts文件，修改外部ts参数）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！