Vue3 Composition Api 与 Vue2 Options Api

Options Api

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

如下图：

 

Composition Api

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

 

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

<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