Vue3的ScriptSetup使用入门教程

前沿

举个例子，如果我们的某一个页面比较复杂，比如类似taobao的首页，用选项式的Api来开发，这个页面有非常多的组件，但是所有的组件响应式数据你都得放在data里，方法放在methods里，然后会在同一个生命周期函数里处理每一个组件的逻辑，这样我们开发人员在开发这个页面时，当前vue文件可能会比较长，如果只是修改一个组件的功能，我们需要不停的上下翻动Vue文件来完成修改

选项式Api，vue文件变的很长

如果我们用组合式的Api的话就能很好的解决上面的这个问题，组合式Api可以把一个组件需要用到的响应式数据、方法、生命周期函数放一个setup中，然后通过return的方式暴露给主页使用就行了，这样就能做到功能的很好复用

组合式Api，单个组件功能分离

使用教程

好了，前面讲了一堆推荐使用组合式Api的理由和好处，我们现在就来讲讲这个setup的使用方式

我们实际项目一般都是通过脚手架工具去生成项目的，比如Vue3推荐使用Vite，开发的话通过单文件组件(SFC)的方式，就像下面的截图一样，template是模板、script里写js逻辑，style里写样式

SFC开发

今天我们重点就来讲这个

2、当使用

3、import 导入的内容也会以同样的方式暴露。意味着可以在模板表达式中直接使用导入的 helper 函数，并不需要通过 methods 选项来暴露它：

4、响应式状态需要明确使用响应式 APIs 来创建。和从 setup() 函数中返回值一样，ref 值在模板中使用的时候会自动解包：

5、

6、可以使用带点的组件标记，例如 来引用嵌套在对象属性中的组件。这在需要从单个文件中导入多个组件的时候非常有用：

7、使用自定义指令，但这里有一个需要注意的限制：必须以 vNameOfDirective 的形式来命名本地自定义指令，以使得它们可以直接在模板中使用。

8、在

9、在

好了，Vue3.2的script setup就介绍到这了

网站题目：Vue3的ScriptSetup使用入门教程
路径分享：http://www.mswzjz.cn/qtweb/news22/317472.html

攀枝花网站建设、攀枝花网站运维推广公司-贝锐智能，是专注品牌与效果的网络营销公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 贝锐智能