Vue3 Composition Api 与 Vue2 Options Api

Options Api

Options API，即选项API，即以vue为后缀的文件，通过定义methods，computed，watch，data等属性与方法，共同处理页面逻辑

如下图：

 

Composition Api

在 Vue3 Composition API 中，组件根据逻辑功能来组织的，一个功能所定义的所有 API 会放在一起（更加的高内聚，低耦合）

 

<template>
	<span>
		<span id="num">{{num}}</span>
		<input type="button" value="+1" @click="f1">
	</span>
</template>

<script setup>
    import {ref} from "vue"

    var num = ref(10)

    function f1() {
        num.value++
        console.log(num.value)
    }
</script>

　　

 

参考文章: https://www.jianshu.com/p/5ebec903712c