
上QQ阅读APP看书,第一时间看更新
3.2 setup语法糖

在Vue3中,setup()是组合式API的入口函数,各种属性和方法都要在setup()函数中定义,在视图层中使用属性或者方法时,必须要使用return进行导出,示例代码如下。

上述代码在setup()入口函数中定义msg属性和log方法,通过return导出才可以在视图层使用。但是随着业务量的增大,在导出属性和方法的过程中很有可能会有遗漏,导致导出程序出错,setup语法糖的出现可以帮助我们避免这个问题的发生。
setup语法糖可以使代码更加简洁,有更好的运行时性能,使用语法糖之后的代码如下。

代码解析:
使用setup语法糖之后,数据层定义的属性和方法可以在视图层直接使用。
注意:
通过import导入的自定义组件也可以直接在视图层进行使用。
至此,登录静态页面开发完成。