Vue3发布之前曾经了解过一点，感觉忘记的差不多了再来重新学习下。
Vue3的编程风格我都打算采用组合式API所以只记录这个了，
Setup函数
vue3我们逻辑部分代码都写在setup函数里，这个函数接受两个参数 props和context
props非常好理解，它其实就是父组件传递过来的属性会被放到props对象中，我们在setup中如果需要使用，那么就可以直接
通过props参数获取：
对于定义props的类型，我们还是和之前的规则是一样的，在props选项中定义；
并且在template中依然是可以正常去使用props中的属性，比如message；
如果我们在setup函数中想要使用props，那么不可以通过 this 去获取（后面我会讲到为什么）；
因为props有直接作为参数传递到setup函数中，所以我们可以直接通过参数来使用即可；
另外一个参数是context，我们也称之为是一个SetupContext，它里面包含三个属性：
attrs：所有的非prop的attribute；
slots：父组件传递过来的插槽（这个在以渲染函数返回时会有作用，后面会讲到）；
emit：当我们组件内部需要发出事件时会用到emit（因为我们不能访问this，所以不可以通过 this.$emit发出事件）；
下面通过一个计数器的例子讲解下：
既然规定了逻辑都写在setup函数里
这里定义了一个data变量，想在模板中展示结果发现页面上什么都没有，事实上setup是一个函数那么它可以有返回值，那他的返回值可以做的事情其实就是在我们的模板中使用，用setup的返回值来代替以前的data选项，
这样模板就可以拿到我们的变量进行展示了，同理如果我们定义了方法也是需要return出去的
现在写了一个+1函数让按钮加1，注意需要把const改为let，因为const声明的变量不可以被修改
但是通过界面发现数值确实被改变了但是视图没有更新，其实是因为对于一个定义的变量来说，默认情况下，Vue并不会跟踪它的变化，来引起界面的响应式操作；如果想为在setup中定义的数据提供响应式的特性，那么我们可以使用ref的函数：
这里我们引入ref函数包装一下我们需要响应式的数据，告诉vue我们这个data变量是需要响应式的，那么在这个数据被操作改变以后vue就会劫持到来对我们的试图进行刷新，可以看到界面更新了，ref会返回一个ref对象，其中的value属性就是我们需要获取的值，可以看到模板里并没有通过data.value而是直接data就可以拿到那是因为模板中对ref对象做了浅层的解包自动帮我们拿到了value值。但是在 setup 函数内部，它依然是一个 ref引用， 所以对其进行操作时，我们依然需要使用 ref.value的方式
以上就是简单的定义一个响应式数据并且操作的例子，
与ref相对应的还有一个reactive api也是定义响应式特性的，区别不同的是ref是定义简单的数据类型，reactive是定义复杂数据结构的
比如这里定义了一组对象然后通过函数进行修改赋值。
其实ref也可以用来定义复杂数据结构，一些gitHub上开源的项目和我看过的一些项目里来说
通常
一般本地的数据，一组有关系的数据比如账号，密码定义在一个对象里，这种情况下通常使用reactive,
其他情况下，都使用ref,
上面是一个简单的例子，说明了使用ref更加的便捷，当然也没有说非要使用ref只是个人的一点心得。