自学前端开发 - VUE 框架 (四) 组合式 API

@[TOC](自学前端开发 - VUE 框架 (四) 组合式 API)
vue2 中使用的是选项式API，到 vue3 中引入了组合式API。选项式API易于学习和使用，写代码的位置已经约定好了，但是代码组织性差，相似的逻辑代码不便于复用，逻辑复杂代码多了不好阅读。而组合式API在功能逻辑复杂繁多情况下，各个功能逻辑代码组织再一起，便于阅读和维护，缺点是需要有良好的代码组织能力和拆分逻辑能力。

在学习阶段，可以选择选项式API来写一些简单的程序。虽然 vue 对两种风格都支持，但是在一些 UI 框架或学习其他人写好的程序时，还是需要对两种风格都有些了解。另外虽然 vue 可以两种风格混用，但是在阅读、成员访问等方面会出现混乱，所以不推荐混用。

基础用法

组合式API使用时也是基于应用实例，因此需要先创建一个应用实例。和选项式API不同的是，选项式API在创建应用实例时，传入的是若干选项组成的对象，而组合式API传入的，主要是 setup 函数对象。所有选项式API中各选项功能都写在 setup 函数中。

<div id="app">
	<p @click="increment">{{ num }}p>
div>

<script>
    const {createApp, ref} = Vue;
    let app = createApp({
        setup() {
            // 响应式状态
            let num = ref(0);

            // 用来修改状态、触发更新的函数
            function increment() {
                num.value++
            }
            // 返回值会暴露给模板和其他的选项式 API 钩子
            return {num, increment}
        }
    }).mount('#app')
script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

setup 函数将返回一个对象，页面渲染需要的数据、方法、响应式状态需要放在此对象中。

在 setup 函数中手动暴露大量的状态和方法非常繁琐。当使用单文件组件（SFC）时，可以使用