Vue3——CompositionAPI（组合式API）

一、CompositionAPI（组合式API）

OptionsAPI：选项式API，这是Vue2的用法，其中将数据、方法和计算属性都是分散在data、methods、computed等版块中，不便于维护和复用

CompositionAPI：组合式API，这是Vue3的用法，是用函数的方法将相关功能的代码更加有序地组合在一起，相当于一个函数里面包含了数据、方法和监听事件等。

二、setup

通过setup配置项实现组合式API，值是一个函数，组件中所用到的：数据、方法、计算属性、监听事件等均配置在setup中。

特点：

　　①setup函数返回的对象中的内容可以直接在模板中使用

　　②setup中访问的this是undefined

　　③setup函数会在beforeCreate之前调用，领先所有钩子执行

用法一：

<script lang="ts">
    export default {
        name: 'Xxx',
        setup() {
            let name = '张三'
            function changeName() {
                name = '李四'
            }
　　　　　　　return {name, changeName};
        }
    }    
</script>    

用法二：setup语法糖——无需写setup函数并且自动导出（简写组件命名name="Xxx123"——安装vite插件依赖 npm i vite-plugin-vue-setup-extend -D  （-D是指开发依赖，不会被打包到生产环境））

<script lang="ts" setup name="Xxx123">
　　let name = '张三'
　　function changeName() {
　　　　name = '李四'
　　}
</script>