Vue3的选项式和组合式的区别

Vue中的选项式和组合式

Vue3中组合式与选项式的区别:

• 选项式更偏向于描述组件的逻辑,分工明确；组合式更偏向于函数式编程,简洁明了,易于维护
• setup语法糖引入,不需要default export,setup也不需要return,组件无需手动引入,引入组件名默认为组件所在文件的文件名

选项式

<script>
import HelloWorld from '@/views/HelloWorld.vue';
import { ref } from 'vue';
export default {

    setup(){
        const count = ref(0)
        const countAdd = ()=>{
            count.value++
        }
        return {
            count,
            countAdd
        }
    },
    components:{
        HelloWorld
    }
}
</script>

<template>
    <HelloWorld />
    <el-button @click="countAdd" type="primary">{{ count }}</el-button>
</template>

<style scoped></style>

组合式

<script setup>
import HelloWorld from '@/views/HelloWorld.vue';
import { ref } from 'vue';

const count = ref(0)
const countAdd = () => {
    count.value++
}
</script>

<template>
    <HelloWorld />
    <el-button @click="countAdd" type="primary">{{ count }}</el-button>
</template>

<style scoped></style>

效果图