vue3新特性学习小结

组合式API，主要目的就是为了解决以前那些逻辑较为复杂的大组件，各个逻辑点代码相互分散，需要来来回回“跳转”查看，这种极不方便的操作。
1.以前写在 data/computed/watch/provide/inject等标签中的代码，都可以提取到一个setup标签中来使用，使该逻辑代码相关的变量、函数处理、监听等都在一个逻辑块中查看。
这些在setup标签中使用的原标签，都需要通过从vue引用后再setup中使用

import { ref, computed, reactive, watch,inject , toRefs } from "vue";

2.ref、reactive
响应式变量设置：基础类型使用 ref 、 引用类型使用 reactive
注意：使用上述响应式包裹后的变量，若在setup标签中使用，必须用 XX.value的形式来访问其值。但return出去后的值，则已经被自动处理，不能通过xx.value来访问，只能直接使用。
如：

<template>
  {{ watchCount }}
</template>

helloworld.vue

3.使用provide响应式时，建议在注入时添加响应
app.vue

4.如上app.vue中使用 onMounted 所示，在setup中使用生命周期钩子函数时直接前缀加上on即可。且 setup本身处于beforecreated之前，所以除了created、beforecreated 其余生命周期均可使用。
注意：由于setup时，vue实例并未创建，所以在setup中使用this并不是指向当前vue实例。

5.由于setup只能表示一组逻辑点，因此，如果需要使用多个逻辑块，需要单独编写js进行导入。
scend.js

helloworld.vue中引入并使用。因为js中导出的是function，因此先运行，然后才能获取到其return的值。当然 可以在主逻辑的任何位置调用该函数。

总的来说，这个setup的改进，确实让我拍手称快，以前最讨厌的就是数据是数据扎堆，函数是函数聚集，各种来回翻转看同一个逻辑，烦的不行。点赞！