要实现单击按钮数字递增 ，之前vue2的写法是：
使用Vue3组合式api：（代码变少了）
之前的vue底层是webpack，现在底层切换到了Vite，vite更快
创建Vue3的项目
npm init vue@latest 。这一指令将会安装并执行create-vue
https://blog.csdn.net/sjp991012/article/details/134426007?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522171634622816800226526774%2522%252C%2522scm%2522%253A%252220140713.130102334..%2522%257D&request_id=171634622816800226526774&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2allsobaiduend~default-1-134426007-null-null.142v100pc_search_result_base2&utm_term=%E6%80%8E%E4%B9%88%E5%8D%B8%E8%BD%BD%E4%B9%8B%E5%89%8D%E7%9A%84node&spm=1018.2226.3001.4187#1nodejs_12
setup写法和执行时机
他的执行时机是在beforecreate之前，并且是自动执行的
**里面定义数据或函数并且想在模板中（template）用的话，你必须写return出去才可以使用
但是这样写很麻烦所以有一个语法糖。把繁琐的写法变成简单的写法。
直接在script标签中写setup
setup的this指向不是组件实例，而是undefined。因为在beforecreate之前执行，实例还未创建
组合式api的两个响应式函数 reactive和ref函数
reactive()
作用是:接受对象类型数据的参数传入并返回一个响应式对象
<script setup>
//1.导入函数
import { reactive } from 'vue'
//执行函数 传入一个对象类型的参数 变量接收
const state = reactive({
num: 0
})
const addnum = () => {
state.num++;
}
</script>
<template>
<div>
<button @click="addnum">{{ state.num }}</button>
</div>
</template>
ref函数
既能接收简单类型的参数还能接受对象类型的参数,并返回响应式的对象
<script setup>
//1.导入函数
import { ref } from 'vue'
//执行函数 传入一个对象类型的参数 变量接收
const num = ref(0)
const addnum = () => {
//这里必须得value
num.value++;
}
</script>
<template>
<div>
<button @click="addnum">{{ num }}</button>
</div>
</template>
reactive和ref都是用函数调用的方式生成响应式数据
其实ref能实现对象和简单数据类型,而reactive只能实现对象类型的参数.那么为什么还要有reactive.
因为ref函数内部的实现依赖于reactive函数.所以实际工作中使用ref函数就可以了.更加灵活。
