关于vue3 option api新玩法分享

可能一些朋友看到标题,瞬间就不淡定了,vue3+option api,在大家都在使用setup做组合式API的今天,这不就是开历史的倒车吗?别急啊,我们这么做,也是有苦衷的。

关于vue3 option api新玩法分享_第1张图片

这是2个月之前在一篇介绍script setup的文章里面,我发布一个评论。事情就如同评论所说,考虑到成员之间水平不一样,太灵活了,你写代码煮面条我也煮面条,彼此之间反而互相看不懂代码了。那做eslint规范约束吧,约束到最后得到一个长得像option api但效果又没有option api好的规范,最终团队默默退回了option api了。

可能有些朋友还不知道什么是option api,什么是setup吧?这里先简单解释一下,所谓option api,就是vue2的那套写法:

export default {
    data(){
        return {/*...*/}
    },
    methods:{},
    mounted(){}
}

而所谓script setup或者组合式api,是vue3的一个新写法,它允许我们在setup作用域下完成整个页面的逻辑编写:

export default defineComponent({
    setup(){
        const a = ref(0)
        onMounted(()=>{
            a.value = 100
        })
        return {
            a
        }
    }
})

// 或者在
                    
                    

你可能感兴趣的:(关于vue3 option api新玩法分享)