1.Composition API介绍

Vue2时的方式在代码很少的时候，逻辑结构还是蛮清晰的，但是随着组件功能越来越多，代码量越来越大，整体内容全部放在其中肯定会显得臃肿。因为每个功能模块的代码会散落分布在各个位置，让整个项目的内容难以阅读和维护。这也导致我们需要考虑用其他方式来维护代码，比如Vuex。 如下图所示：

而到了Vue3，它会根据逻辑功能来进行组织，把同一个功能的不同代码都放在一起，或者把它们单独拿出来放在一个函数中，所以Composition API又被称为基于函数组合的API。

2.setup

setup函数是Vue3中新增的函数，它是我们在编写组件时，使用Composition API的入口。同时它也是Vue3中新增的一个生命周期函数，会在beforeCreate之前调用。因为此时组件的data和methods还没有初始化，因此在setup中是不能使用this的。所以Vue为了避免我们错误的使用，它直接将setup函数中的this修改成了undefined。并且，我们只能同步使用setup函数，不能用async将其设为异步。

setup最重要的特征：

• 新的option, 所有的组合API函数都在此使用, 只在初始化时执行一次
• 函数如果返回对象, 对象中的属性或方法, 模板中可以直接使用

首先，给一个setup函数的使用简例：

<template>
    <!--与vue2模板的区别：不需要定义一个根标签-->
    <h1>第一个Vue3案例</h1>
    <hr>
    <div>{{msg}}</div>
</template>

<script lang="ts">
    import {defineComponent} from 'vue';
    export default defineComponent({
        name: 'App',
        setup() {
            console.log('执行了setup()...');
            return {
                msg: 'hello,vue3!'
            }
        }
    });
</script>

<style>
    #app {
        height: 100%;
        margin: 0;
        padding: 0;
        border: 0;
    }
    /*解决微信浏览器背景默认灰色问题*/
    body, html {
        background: #ffffff
    }
</style>