Vue3——CompositionAPI（组合式API）

一、CompositionAPI（组合式API）

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

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

二、setup

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

特点：

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

　　②setup中访问的this是undefined

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

用法一：

?

1 2 3 4 5 6 7 8 9 10 11

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

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

?

1 2 3 4 5 6

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