1. 組合式函數(shù)
????????在 Vue 應(yīng)用的概念中，“組合式函數(shù)”(Composables) 是一個(gè)利用 Vue 的組合式 API 來(lái)封裝和復(fù)用有狀態(tài)邏輯的函數(shù)。更為復(fù)雜的業(yè)務(wù)邏輯可以使用store來(lái)處理
????????vue3中不在推薦使用mixins，在 Vue 2 中，mixins 是創(chuàng)建可重用組件邏輯的主要方式。盡管在 Vue 3 中保留了 mixins 支持，但對(duì)于組件間的邏輯復(fù)用，Composition API?是現(xiàn)在更推薦的方式。
? ? ? ? 在不使用mixins的情況下，外部js無(wú)法調(diào)用vue頁(yè)面中參數(shù)，所以我們需要調(diào)用方法或者調(diào)用ts中的參數(shù)時(shí)。需要通過(guò)export 將參數(shù)和方法暴露出來(lái)。在外部的ts文件中我們可以使用vue的API，例如：onMounted,onUnmounted...
如圖：??
??????
?2.Vue頁(yè)面
<template>
<div class="home">
<div>調(diào)用外部js：{{addNum}}</div>
<button @click="clickAdd">加</button>
<div>改變外部js參數(shù):{{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 的對(duì)比
????????mixins 有三個(gè)主要的短板：
????????????????
-
不清晰的數(shù)據(jù)來(lái)源：當(dāng)使用了多個(gè) mixin 時(shí)，實(shí)例上的數(shù)據(jù)屬性來(lái)自哪個(gè) mixin 變得不清晰，這使追溯實(shí)現(xiàn)和理解組件行為變得困難。這也是我們推薦在組合式函數(shù)中使用 ref + 解構(gòu)模式的理由：讓屬性的來(lái)源在消費(fèi)組件時(shí)一目了然。
-
命名空間沖突：多個(gè)來(lái)自不同作者的 mixin 可能會(huì)注冊(cè)相同的屬性名，造成命名沖突。若使用組合式函數(shù)，你可以通過(guò)在解構(gòu)變量時(shí)對(duì)變量進(jìn)行重命名來(lái)避免相同的鍵名。文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-615833.html
-
隱式的跨 mixin 交流：多個(gè) mixin 需要依賴(lài)共享的屬性名來(lái)進(jìn)行相互作用，這使得它們隱性地耦合在一起。而一個(gè)組合式函數(shù)的返回值可以作為另一個(gè)組合式函數(shù)的參數(shù)被傳入，像普通函數(shù)那樣。文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-615833.html
到了這里，關(guān)于Vue3：組合式函數(shù)（引入外部ts文件，修改外部ts參數(shù)）的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
