组合式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的改进,确实让我拍手称快,以前最讨厌的就是数据是数据扎堆,函数是函数聚集,各种来回翻转看同一个逻辑,烦的不行。点赞!