一文搞懂Vue3.2中setup语法糖使用一文搞懂Vue3.2中setup语法糖使用

前言
一、如何使用setup语法糖
二、data数据的使用
三、method方法的使用
四、watchEffect的使用
五、watch的使用
六、computed计算属性的使用
七、props父子传值的使用
八、emit子父传值的使用
九、获取子组件ref变量和defineExpose暴露
十、路由useRoute和useRouter的使用
十一、store仓库的使用
十二、await 的支持
十三、provide 和 inject 祖孙传值

前言提示：Vue3.2 版本开始才能使用语法糖！在 Vue3.0 中变量必须 return 出来，template中才能使用；而在 Vue3.2 中只需要在 script 标签上加上 setup 属性，无需 return，template 便可直接使用，非常的香啊！
提示：以下是本篇文章正文内容，下面案例可供参考

一、如何使用setup语法糖只需在 script 标签上写上setup
代码如下（示例）：

二、data数据的使用由于 setup 不需写 return，所以直接声明数据即可
代码如下（示例）：

三、method方法的使用代码如下（示例）：

四、watchEffect的使用代码如下（示例）：

五、watch的使用代码如下（示例）：

六、computed计算属性的使用 computed计算属性有两种写法(简写和考虑读写的完整写法)
代码如下（示例）：

七、props父子传值的使用子组件代码如下（示例）：

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

八、emit子父传值的使用子组件代码如下（示例）：

【一文搞懂Vue3.2中setup语法糖使用】父组件代码如下（示例）：

九、获取子组件ref变量和defineExpose暴露即vue2中的获取子组件的ref，直接在父组件中控制子组件方法和变量的方法
子组件代码如下（示例）：

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

十、路由useRoute和useRouter的使用代码如下（示例）：