(二)vue3使用合成函数Composition Function

(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>