vue3 之 组合式API - setup选项

已于 2024-02-08 21:59:28 修改
阅读量359 收藏
点赞数 3
分类专栏： vue3 文章标签： vue vue3
于 2024-02-03 10:30:41 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42268006/article/details/136005081
版权

首先我们先看下setup选项的写法和执行时机

在这里插入图片描述

setup选项中写代码的特点

在这里插入图片描述

语法糖

在这里插入图片描述

总结

  1. setup选项的执行时机？
    beforeCreate钩子之前 自动执行

  2. setup写代码的特点是什么？
    定义数据 + 函数 然后以对象方式return

  3. script setup解决了什么问题？
    经过语法糖的封装更简单的使用组合式API

  4. setup中的this还指向组件实例吗？
    指向undefined

jiojio冲冲冲
关注
专栏目录
【vue3】组合式API之setup()介绍与reactive()函数的使用
嗨，朋友你好！我是前端领域的工作者
03-29 3348
vue3项目中组合式API基础概念、setup()入口函数概念、 reactive()的使用
vue3--组合式API - setup选项
qq_68442164的博客
05-13 242
第三个特点：提供数据或者函数，想要在我们的模板中使用，必须在setup中return -->第一个特点：setup的执行时机比beforeCreate早。第二个特点：创建时机太早，setup中获取不到this。第四个特点：多次return复杂，简洁：语法糖。
【Vue3 组合式 API - setup 选项详解】
武帝为此的博客
03-09 650
setup选项是 Vue 3 中最重要的部分之一，允许在组件中使用逻辑复用和组合，取代了 Vue 2.x 中的 Options API 和 Mixins。在 Vue 3 中，每个组件都可以包含一个setup函数，这个函数会在组件实例被创建之前执行。setupprops和context。其中，props是组件的属性对象，而context包含了一些与组件实例相关的信息，比如attrsslots等。setup函数的返回值可以是一个对象，该对象中包含了组件内部需要使用的响应式数据、计算属性、方法等。
3、Vue3组合式Api-setup选项
分享java学习路上的一些笔记，不足之处多多见谅。
05-26 229
1、setup选项的写法和执行时机 setup是一个函数 setup的执行时机比 beforeCreate还要早
vue3 组合式API --- setup()
weixin_64462471的博客
05-01 206
也可以返回一个渲染函数，此时在渲染函数中可以直接使用在同一作用域下声明的响应式状态。expose 函数的使用场景之一：当 setup 返回一个渲染函数，且想暴露一些方法给父组件时，可以结合 expose 函数来使用。expose 函数的作用： 用于显式地限制该组件暴露出的属性，当父组件通过模板引用访问该组件的实例时，将仅能访问。setup 应该同步的返回一个对象，在 Suspense 组件的后裔中可以使用异步。，可以在选项式API中访问组合式API暴露的值，功能：在 setup() 函数中返回的对象，
vue3 组合式 API：setup()
咸鱼滚滚
08-17 1138
setup() 函数是在组件实例创建之前执行的，它用于组合组件的逻辑，包括响应式数据、方法、计算属性、监听等。它接收两个参数：props 和 context，并返回一个对象，其中包含可以在组件模板中使用的属性和方法。
Vue3复习和总结----组合式API-setup，终
zyugat的博客
11-17 1044
Vue3复习和总结----组合式API-setup 代码全部放在->github仓库：https://github.com/zyugat/vue-review-all 详细文档可查看：zyugat.cn 前言：分为base、Component、router、Vuex、组合式API。5个部分。 base和Component中的例子不使用脚手架运行，需自行浏览器运行。位置->noCli 组合式API-setup 将界面中重复的部分连同功能都提取为可重用的代码段 在 setup 中你应该避免使用 t
vue3学习day02-组合式API-setup选项、reactive（将非响应式数据变为响应式数据）、computed（基本思想和vue2一致）、watch
2301_76648183的博客
08-01 388
需要返回 已知：浅层监视。
vue两种类型的API--选项式API和组合式API
weixin_43962020的博客
12-30 4472
当用Vue 构建完整的单页应用，推荐采用组合式 API + 单文件组件，两种类型的API可以混用，在选项式API中通过setup()选项来使用组合式API。用包含多个选项的对象来描述组件的逻辑，例如 data、methods 和 mounted，选项所定义的属性都会暴露在函数内部的this上，它会指向当前的组件实例。是一系列 API 的集合，使用函数而不是声明选项的方式书写 Vue 组件，它是一个概括性的术语，涵盖了响应式API、生命周期钩子、依赖注入。
使用 vue-class-setup 编写 class 风格组合式API，支持Vue2和Vue3
lzxb4的博客
09-23 1301
我司基于vue-class-component开发的项目有上百个，其中部署的 SSR 服务也接近100个，如此庞大体量的项目一开始的时候还幻想着看看是否要升级Vue3，结果调研一番下来，才发现vue-class-component对Vue3的支持，最后一个版本发布都过去两年了，迟迟还没有发布正式版本。目前基本上处于无人维护的状态，而且升级存在着大量的破坏性更新，对于未来是否还要继续使用Vue3现在还是持保留意见，但是不妨碍我们先把组件库做成Vue2和Vue3通用，于是就有了本文。
Vue3.0组合式API：setup()函数
pan_junbiao的博客
09-14 1349
setup() 函数是一个新的组件选项，它是组件内部使用组合式 API 的入口。setup() 函数在组件实例创建之前，初始化 Prop 之后调用，而且setup() 函数是在 beforeCreate 钩子函数之前调用。setup() 函数可以返回一个对象或函数，对象的属性会合并到组件模板渲染的上下文中。setup() 函数可以接收两个可选的参数。第一个参数是响应式的 props 对象，第二个参数是一个上下文（context）对象。
Vue3 - 什么是组合式 API？与选项式 API 有什么不同？（先从 Vue2 角度进行讲解，然后过渡到 Vue3）详细教程
王佳斌
11-09 2698
vue官方文档，vue3官方文档，vue组合式api官方文档，vue3 中的两种API，vue3学习(2)选项式API和组合式API的区别，Vue3组合式API，Vue3 组合式 API Vue3 组合式 API(Composition API)，[Vue]浅谈Vue3组合式API带来的好处以及选项API的坏处，什么是Vue3的组合式API?，vue3和vue2在API使用上有哪些差异，Vue3中的组合式 API示例详解，Vue3 组合式 API | 菜鸟教程，我一定要用Vue3的setup吗? | 组合式
vue3 ---＞ setup() 用法 响应式API - reactive 响应式API - ref
qq_43944285的博客
05-27 1016
setup() 介绍 参考官方文档 使用 setup 函数时，它将接收两个参数： props context //让我们更深入地研究如何使用每个参数 Props setup 函数中的第一个参数是 props。正如在一个标准组件中所期望的那样，setup 函数中的 props 是响应式的，当传入新的 prop 时，它将被更新。 Context 传递给 setup 函数的第二个参数是 context。context 是一个普通 JavaScript 对象，暴露了其它可能在 setup 中有用的值： 访问组件的
【java毕业设计】校内跑腿业务系统源码（springboot+vue+mysql+说明文档）.zip
11-04
项目经过测试均可完美运行！ 环境说明： 开发语言：java jdk：jdk1.8 数据库：mysql 5.7+ 数据库工具：Navicat11+ 管理工具：maven 开发工具：idea/eclipse
【java毕业设计】大学志愿填报系统源码（springboot+vue+mysql+说明文档）.zip
11-04
项目经过测试均可完美运行！ 环境说明： 开发语言：java jdk：jdk1.8 数据库：mysql 5.7+ 数据库工具：Navicat11+ 管理工具：maven 开发工具：idea/eclipse
基于java的网吧管理系统答辩PPT.pptx
11-04
基于java的网吧管理系统答辩PPT.pptx
基于java的基于SSM架构的网上书城系统答辩PPT.pptx
11-04
基于java的基于SSM架构的网上书城系统答辩PPT.pptx
tornado-6.1-cp37-cp37m-win32.whl
11-04
tornado-6.1-cp37-cp37m-win32.whl
气泡排序、插入排序、选择排序、快速排序、希尔排序、堆排序、合并排序-SortAlgorithm.zip
最新发布
11-04
c语言气泡排序、插入排序、选择排序、快速排序、希尔排序、堆排序、合并排序_SortAlgorithm.zip
Vue3选项式API和组合式API的概念
10-10
Vue3引入了两种主要的API设计风格：选项式API（Options API）和组合式API（Composition API）。以下是它们的简要解释： 1. **选项式API**：这是Vue早期版本的传统模式，开发者通过`<script>`标签定义组件的选项，如...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

jiojio冲冲冲

能帮助你是我最大的动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值