Vue3---基础3（组合式API，setup语法糖）

选项式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 = 22
    let 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>