vue3.2 setup 语法糖汇总

作者 |  玲小叮当

来源 | https://segmentfault.com/a/1190000041849882

前言

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

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

提示：以下是本篇文章正文内容，下面案例可供参考

1、如何使用setup语法糖

只需在  script  标签上写上 setup

代码如下（示例）：

2、data数据的使用

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

代码如下（示例）：

3、method方法的使用

代码如下（示例）：

4、watchEffect的使用

代码如下（示例）：

5、watch的使用

代码如下（示例）：

6、computed计算属性的使用

computed 计算属性有两种写法(简写和考虑读写的完整写法)

代码如下（示例）：

7 、props父子传值的使用

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

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

8 、emit子父传值的使用

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

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

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

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

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

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

10、路由useRoute和us eRouter的使用

代码如下（示例）：

11、store仓库的使用

代码如下（示例）：

12、await的支持

setup  语法糖中可直接使用  await ，不需要写  async  ，  setup  会自动变成  async setup

代码如下（示例）：

13、provide 和 inject 祖孙传值

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

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

总结

以上就是我今天与你分享的全部内容，希望对你有所帮助，如果你觉得有用的话，请记得点赞我，分享我，并将它分享给你身边做开发的朋友，也许能够帮助到他。

学习更多技能

请点击下方公众号