vue3第六幕之【组合式API】setup语法糖

文章简介

本文是vue3更新到目前为止的第六篇文章，这次的主要内容是组合式API中最开始的一部分——setup()，也是整个vue3的精粹所在。让我们在键盘的敲击声中，感受知识的永恒律动吧!

前言部分

在vue中，使用setup是为了封装复用；setup的设计是为了使用组合式api，当组件变得更大时，逻辑关注点的列表也会增长，会导致组件难以阅读和理解，而通过setup可以将该部分抽离成函数，就可以不用关心该部分的逻辑了。

主要内容（精炼内容见图片）

内容精炼提要：（见下图）

1 setup()基本信息

1.1 Def

setup是所有组合式api（composition api）表演的舞台。（可以理解成，没有setup，整个组合式api将没有任何效果展现）setup是vue3中的一个新的配置项，值为一个函数。

1.2 框架图示

下面，我们将对setup的框架进行搭建。

2 基本框架搭建

组件中所用到的数据、方法、属性等等，都要配置在setup中。因此，框架搭建的第一步是数据和方法的配置。

2.1 data methods等

• vue3里不像vue2里，需要分data和methods两部分编写，对应的语句放在对应的部分。

• 但vue3里都是放在setup中，我们可能会觉得全部放在一起不是显得更加冗杂吗？

  vue3智能地解决了这个问题，开发者会将这些语句功能化编写，一个功能对应一个小模块，这样做能够方便开发者后续查找功能查找内容。

• setup里面能写什么呢？
  在组件中用到的数据、方法、计算属性、监视属性，生命周期钩子，都可以往里面写。

下面在程序里配置数据和方法

<template>
    <h1>我是App组件</h1>
</template>

<script setup lang="ts">

    export default {
        name:'App',
        // 此处只是测试一下setup，暂时不考虑响应式的问题
        setup(){
            // 数据
            let name = '张三'
            let age = 18
            
            // 方法
            function sayHello(){
                alert(`我叫${name}，我${age}岁了，你好啊！`)
            }
        }
    }
</script>

代码截图如下：

2.2 返回值（两种）

setup函数的两种返回值： 一个是对象，一个是渲染函数。

2.2.1 返回一个对象

若返回一个对象，则对象的属性，方法，在模板中均可以直接使用（需要重点关注！）

首先让你的程序有一个返回值return

<template>
    <h1>我是App组件</h1>
    <h2>姓名：{{name}}</h2>
    <h2>年龄：{{age}}</h2>
    <button @click="sayHello">说话</button>
</template>

<script setup lang="ts">
    export default {
        name:'App',
        // 此处只是测试一下setup，暂时不考虑响应式的问题
        setup(){
            // 数据
            let name = '张三'
            let age = 18
            
            // 方法
            function sayHello(){
                alert(`我叫${name}，我${age}岁了，你好啊！`)
            }

            return {
                name,
                age,
                sayHello
            }
        }
    }
</script>

代码截图：（绿色框内为新增部分）

运行结果如下：

点击按钮之后确实有弹窗

在vue.js devtools开发工具中显示的界面

2.2 2 返回一个渲染函数

若返回一个渲染函数，则可以自定义渲染的内容。（了解即可）

• 给程序一个范围值，这里的返回值自然而然是一个渲染函数（箭头函数）。
  首先和vue2一样，vue3同样有渲染函数，并且都名为h，vue3要做的是在开头引入h函数。

代码如下：

<template>
    <h1>我是App组件</h1>
    <h2>姓名：{{name}}</h2>
    <h2>年龄：{{age}}</h2>
    <button @click="sayHello">说话</button>
</template>

<script setup lang="ts">
    import { h } from 'vue';
    export default {
        name:'App',
        // 此处只是测试一下setup，暂时不考虑响应式的问题
        setup(){
            // 数据
            let name = '张三'
            let age = 18
            
            // 方法
            function sayHello(){
                alert(`我叫${name}，我${age}岁了，你好啊！`)
            }

            /*return {
                name,
                age,
                sayHello
            }*/

            return ()=>{return h('h1','xxx')}
        }
    }
</script>

代码截图：（script部分）

• 这里有两个return 第一个是把粉色框内的东西返回出去 第二个是粉色框内返回h的调用结果
  
  这里可以做一个箭头函数的精简 （return删掉 花括号删掉 ）
  

• 返回一个函数成为渲染函数，返回一个对象称为常用。需要知道的是，vue2中的数据方法属性等等的配置在vue3中也是可行的。下面我们对代码进行添加（该注释掉的注掉）
  代码截图：
  

• 运行状态和vue2没有区别，但vue3更加简洁智能 。但是千万要注意，尽量不要去混用混写。

2.2.3 切记vue2 3 混写

下面是一个混写出错的例子：

以下代码为添加部分：
template添加部分（每个按钮之间换行）

setup添加部分
下面我们来看看输出结果。

接下来我们来试试，在vue3里面读取vue2里的配置。看看是什么效果。
代码添加部分：
template添加部分（按钮之间换行）

setup添加部分（绿色框）

下面我们来看看控制台的结果


很显然vue3是读取不出来vue2配置的数据方法的。这里还是在想办法说明，不要将vue2和vue3的配置混用。同时也说明了当vue2和vue3发生冲突时，以vue3为主。（可以借助变量在vue2和vue3中的不同赋值，查看输出结果，来证明两者的优先级）。

3 注意点汇总（后续补充）

3.1 不要与vue2.x配置混用

• vue2.x配置的数据方法属性中可以访问到setup即vue3中的方法属性，但是setup不能访问到vue2.x的配置。
• 如果vue2.x与setup有重名，setup保持优先。

3.2 setup不能是async函数

• 当setup是一个async函数时，返回值不再是return的对象，而是promise，模板看不到return对象中的属性。
• 解释一下，如果你定义了一个函数demo，它的返回值是1，倘若在demo的前面加一个async则会导致就算你返回的是1，也会是返回值1的外面会被promise包裹，这样的话，如果你要取出这个1，就只能用.then来取出。
• 简单地说，只要一个函数被async修饰了，它的返回值就再也不是单纯的返回值了，而是被promise包裹的返回值。

summary

本文是vue3组合式API的前奏部分——setup，这个部分的学习和运用对后面的学习至关重要。文章内容来自我在学习过程中记录的笔记以及网络课程视频、网络资源等等，最后由我整合归纳得出。难免会有不足和错误，希望大家发现之后及时指正，我会在第一时间更新。学习的路还很长，创作不易，感谢陪伴！

下期预告

vue3第七幕之组合式API篇（setup()注意点）