Vue3 核心语法 setup函数概述

从现在就正式开始学习关于Vue3 相关的核心语法了:

1：Vue 3  setup 函数 概述  :

setup 是一个全新的配置项 和原本的 Vue2选项式语法:  methods   , data  的关系非同一般

简单来说 就是 setup 整合了 methos， data  语法  统一到setup 函数中 : Setup : 将Vue 2中的 data 和 methods 选项中的相关代码迁移到Vue 3的setup函数中，并通过return语句将其导出:

我们先通过一个案例来展示一下 对于 setup 的学习 :

首先回顾一下:

Vue2 选项式语法  原本的data 文本插值   和button 按钮之间的 methos 方法调用 如图1:

---

在Setup 函数中 我们可以直接给参数赋值和方法的定义  这里就将原本需要通过2个选项式配置(data 和methos )  通过setup函数组合在了一起 ：

提示:

(return 必须在方法或参数下进行返回 不然会导致方法和参数失效 通过return 将我们的方法名 或参数名进行返回即可   在return 方法域 中定义 被调用方法名和参数名 )

---

不仅这样 setup  中 return 还可以 作为渲染函数 可以直接通过 return对数据进行渲染:直接在return中定义alert弹窗 渲染页面 

1.2: Setup的语法糖:

我们前面讲到 在setup函数中  如何使用 setup 调用button方法 和定义参数 并且通过return 返回我们的 对应的参数和方法名  不过这样就会产生一些问题 当我们每次 定义一个参数或调用方法的时候  都需要通过return对应的方法和参数才能够返回 ;

1.2.1:在模板中定义setup:

 通过在 script 标签中直接定义 setup 的好处就是 不需要关注 具体返回那个方法或者 参数 当我们在 模板中定义了对应的方法名或者 参数 即可 直接返回对应的方法或者参数

这里通过一个修改参数的案例 来具体演示 非常简单：