选项式API与组合式API

        在Vue2内是选项式API（OptionsAPI）

        在Vue3内是组合式API（CompositionAPI）

      选项式API

                示例代码

<script lang="ts">
export default {name: 'person',data() {return {name: "张杰",age: 22,tel: 19821220}},methods: {showTel() {alert(`联系电话：${this.tel}`)},}
}
</script>

        弊端：       

                Options 类型的 API ，数据，方法，计算属性等都是分散在 data，methods。computed中的。新增或者改需求，就要分别修改，不便于维护和复用

        

      组合式API

        优势：

                使用函数的方法，更加优雅的组织代码，相关功能代码更加有序的组织在一起

setup

概念：

        是Vue3中的一个新的配置项，值是一个函数。组件中所用到的数据，方法，计算属性等均配置在 setup 中

特点：

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

        setup 中访问的 this 是 undefined

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

返回值

        可以写成这种对象形式

return {name,age,tel,showTel,changeName,changeAge}

        也可以写成函数形式

return () => {name,age,tel,showTel,changeName,changeAge}

setup 和 OptionsAPI

        在Vue3内，setup 和 data、methods这种选项式api同时存在

        在data内，是可以通过  this 去读取到 setup 内定义的数据，但是在setup内读取不到data内数据

setup语法糖

        使用setup函数需要导出，数据多的情况导出的数据就需要写的很多

        这个时候就可以使用语法糖，写第二个script标签，标签内加上 setup

        这样即使在 script 内写入再多的数据和方法，都不需要return导出了

<script lang="ts">export default {name: 'person',}
</script><script lang="ts" setup>// 数据 此时不为响应式let name = '张杰'let age = 22let tel = 19821220// 方法function showTel() {console.log(tel);alert(`联系电话：${tel}`)}function changeName() {name = 'Jason Zhang'}function changeAge() {age += 1}
</script>

        注意：需要在标签上也写 lang=“ts”，不然会报错

        因为此时写了两个script标签了，第一个标签内就定义了一个名字，如果想省略第一个script，可以按照以下方法实现

        下载扩展包

npm i vite-plugin-vue-setup-extend -D

        在vite.config.ts 文件内  引入下载的包并注册使用

        删除第一个script，在第二个script标签后面可以加name，示例：

<script lang="ts" setup name=“abc123”></script>