vue3 setup语法糖

一、简介

vue3.2 版本开始才能使用语法糖！

在 Vue3.0 中变量必须 return 出来， template 中才能使用；而在 Vue3.2 中只需要在 script 标签上加上 setup 属性，无需 return ， template 便可直接使用，非常的香啊！

Vue3 的一大特性函数 ---- setup
　　1、setup函数是处于 生命周期函数 beforeCreate 和 Created 两个钩子函数之间的函数 也就说在 setup函数中是无法 使用 data 和 methods 中的数据和方法的
　　2、setup函数是 Composition API（组合API）的入口
　　3、在setup函数中定义的变量和方法最后都是需要 return 出去的 不然无法再模板中使用

二、代码

三、说明

NO.1 setup写在script标签内。

使用ref绑定数据，无需export，import的组件页面内可以直接使用，但需要反复const，ref数据。调用数据{数据名}.value。

NO.2 setup写在js中。

使用ref绑定数据，事件和数据都需要return出去。调用数据{数据名}.value。

NO.3 setup写在js中，使用reactive打包页面内数据，再使用toRefs解构。

避免数据反复const和return,事件需要return出去。调用数据data.{数据名}。

四、PS：关于vue3生命周期介绍

1、如何使用setup语法糖

只需在 script 标签上写上 setup

代码如下（示例）：

2、data数据的使用

由于 setup 不需写 return ，所以直接声明数据即可

3、method方法的使用

4、watchEffect的使用

5、watch的使用

6、computed计算属性的使用

7 、props父子传值的使用

子组件代码如下（示例）：

父组件代码如下（示例）：

8 、emit子父传值的使用

子组件代码如下（示例）：

父组件代码如下（示例）：

9、获取子组件ref变量和defineExpose暴露

即 vue2 中的获取子组件的 ref ，直接在父组件中控制子组件方法和变量的方法

子组件代码如下（示例）：

父组件代码如下（示例）：

10、路由useRoute和us eRouter的使用

11、store仓库的使用

12、await的支持

13、provide 和 inject 祖孙传值

父组件代码如下（示例）：

子组件代码如下（示例）：