![Vue.js 3企业级项目开发实战(微课视频版)](https://wfqqreader-1252317822.image.myqcloud.com/cover/500/52842500/b_52842500.jpg)
上QQ阅读APP看书,第一时间看更新
3.2 setup语法糖
![](https://epubservercos.yuewen.com/313864/31398258607654606/epubprivate/OEBPS/Images/Figure-P30_74878.jpg?sign=1739566835-aSGu9s7NJ0Enwt4ITBSQb5pArtKF1TTs-0-e6f2f4be1908bba7a7d2c5bab088a6fe)
在Vue3中,setup()是组合式API的入口函数,各种属性和方法都要在setup()函数中定义,在视图层中使用属性或者方法时,必须要使用return进行导出,示例代码如下。
![](https://epubservercos.yuewen.com/313864/31398258607654606/epubprivate/OEBPS/Images/Figure-P30_125445.jpg?sign=1739566835-nDnOxPOIzNRkiCYGvpdU0aGxIpfqp5EL-0-44ec42b854818b9de7f869b0d08654ee)
上述代码在setup()入口函数中定义msg属性和log方法,通过return导出才可以在视图层使用。但是随着业务量的增大,在导出属性和方法的过程中很有可能会有遗漏,导致导出程序出错,setup语法糖的出现可以帮助我们避免这个问题的发生。
setup语法糖可以使代码更加简洁,有更好的运行时性能,使用语法糖之后的代码如下。
![](https://epubservercos.yuewen.com/313864/31398258607654606/epubprivate/OEBPS/Images/Figure-P31_125447.jpg?sign=1739566835-mnzNzDrddIOITdqsU5ON6ibiWr6XNlbr-0-b511e86df554bf8656f58842347cfbf6)
代码解析:
使用setup语法糖之后,数据层定义的属性和方法可以在视图层直接使用。
注意:
通过import导入的自定义组件也可以直接在视图层进行使用。
至此,登录静态页面开发完成。