Vue3的setup函数以及ref和reactive方法的使用

    在vue3中，有个核心的东西，setup函数，它相当于一个新的生命周期，在beforeCreate 之前执行，在里面没有this

setup默认是非响应式的，即做点击事件修改num的值，模板上的num不会跟着变。

这时候需要用ref方法来让它变成响应式：

重点：setup中不能使用this,ref就是接收某些东西的内部值并返回一个可响应的ref对象,使用return把数据导出进行渲染

其实基于上面这种，我们还有种优化方案，就是把setup中的函数提取到外面抽离到外面进行封装，setup里只需进行一次解构，这样就大大减少了setup中的代码和整洁度

代码如下：

toRef的使用：

什么是toRef:

    比如有这样的一种情况，一个对象里面的数据,有一部分是响应式的，有一部分是写死的

    这样就可以使用toRef可以把一个对象里面的属性变成响应式的数据

代码如下：

以上代码中出现了一个新鲜词汇reactive，下面就详细介绍一下用法

 reactive方法 把对象里面的多个属性变成响应式数据

最后再介绍一种toRefs

一个state里面 可能键非常多 如果一个个的导出会比较麻烦,使用toRefs把一个响应式对象里面的每一个数据 都变成ref对象

如果有什么不了解的地方可留言，如果觉得小编文章做得不好不全，小编一定会进行改进，谢谢！