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

Dorable_Wander

已于 2022-12-09 01:04:23 修改

阅读量2.7k

点赞数 5

CC 4.0 BY-SA版权

分类专栏： Vue 文章标签： vue.js typescript 前端前端框架

于 2022-09-24 03:58:22 首次发布

本文链接：https://blog.csdn.net/XSL_HR/article/details/127020511

本文深入探讨Vue3的setup()函数，它是组合式API的核心。setup允许开发者封装复用逻辑，提高代码可读性。文章介绍了setup的基本框架搭建，包括数据、方法的配置，并详细阐述了返回对象和渲染函数两种方式。强调了不要与Vue2.x配置混用，同时指出setup不能是async函数。通过实例展示了混用Vue2.x和Vue3配置的错误，提醒开发者注意避免此类问题。

文章简介

本文是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