(1)vue3的setup里面可以通过合成函数可以实现把组件js代码和组件分开,js封装合成函数后，组件直接const {doubleval,GetVal}=vue3min(777);获取,如下面代码
(2)vue3在引用一些三方插件的时候就可能经常调用第三方插件js的合成函数,如官网ant design里面的分页的usepaging就是调用了antdesign的分页合成函数
1：先建一个合成函数vue3min.js
import {computed,ref} from "vue"
export default function(obj){
const reval=ref(1);
const doubleval=computed(()=>reval .value*3)
const GetVal=()=>{
alert(obj)
}
return {
doubleval,GetVal
}
}
2:建vue3mixinsv.vue页面
<template>
<h1>{{doubleval}}</h1>
<button @click="GetVal">提交</button>
</template>
<script>
import vue3min from "./vue3min.js"
export default {
name: "AppXx",
setup(){
const {doubleval,GetVal}=vue3min(777);
return {
doubleval,GetVal
}
}
}
</script>