setup组合api

在src目录下创建一个setup文件夹 在当前文件夹中创建一个js文件

	import { ref } from 'vue'
	let count = ref(0)
	// console.log(count);
	function add(num) {
	    count.value = count.value + num
	}
	function minus(num) {
	    count.value = count.value - num
	}
	
	export {
	    count,
	    add,
	    minus
	}

在home页面中

	<template>
	  <div class="home">
	    <button @click="btnMinus">-</button>
	    {{count}}
	    <!-- <button @click="add(2)">+</button> -->
	    <button @click="btnAdd">+</button>
	  </div>
	</template>
	
	<script>
	// ref是组合api的一个声明基本数据类型的数据的方法
	// import { ref } from 'vue'
	import { count, add,  minus} from '../setups/countControl'
	export default {
	  name: 'Home',
	  setup() { // setup运行在声明周期的beforeCreate之前
	  // 在setup中声明的数据或者函数必须return出去才能在页面中使用
	  // vue3使用ref声明的数据时会自动填充value值
	  // 也可以在组合api中直接声明函数
	    function btnAdd() {
	      add(3)
	    }
	
	    function btnMinus() {
	      minus(2)
	    }
	    return {
	      count,
	      btnAdd,
	      btnMinus
	    }
	  }
	}
	</script>