复制 URL 下哉 ZY:https://www.666xit.com/3506/
download:深刻 Go 底层原理,重写 Redis 中间件实战
第一次 Composition API
在 vue3.2 中,正式反对了 script setup
的写法, 这样能够大大简化组件的代码量,缩小一些反复操作,我认为当你写 vue3 时,应该把这当作默认写法。在 vue3.2 之前,个别会这样写。
<script>
export default {setup(props,ctx){const a = ref(0)
// 必须 return 能力在 template 中应用,这里就存在一个反复操作的问题,每次都得 cv, 万一遗记就得查看
return {a}
}
}
</script>
那么当初,咱们能够这样写, 比照一下,缩小了多少行代码呢
<script setup>
const a = ref(0)
</script>
PS: 之后的代码我会省略 script setup,默认都在 script setup 标签下。
兴许你会感觉这样就更简略了,其实恰恰相反,CompositionAPI 其实要求你对逻辑解决有更清晰的意识,对于封装有更高的要求,否则,你一样会写成比以前更丑的代码。
例如:
const a = ref(0)
const b = ref('')
const c = ref(true)
const d = reactive({})
const actionA = ()=>{a.value++}
const actionC = ()=>{c.value=!c.value}
const actionB = ()=>{b.value += 'test'}
const actiond = async ( )=> {const res = await ajax(`url`)
d.a = res.a
d.b = res.b
d.c = res.c
}
const resetD = ()=>{Object.keys(d).forEach(key=>delete d[key])
}
这一堆代码其实就是当你没有思考逻辑,没有想过封装的时候,像流水账一样间接写进去的代码,这些代码真的比 optionsApi 更好浏览吗,当然不。
这里更加凌乱,你很难一眼看出某个函数用的是哪个变量,程序凌乱,这时候须要封装,须要组合,这也是 CompositionAPI
的含意之一。