Vue-3.0 setup函数

已于 2022-07-04 17:29:28 修改
阅读量222 收藏
点赞数
分类专栏： Vue 文章标签： vue.js
于 2022-06-30 20:50:37 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/slient033/article/details/125541939
版权

1、setup函数，是组合API的起点。

2、该函数在beforeCreate钩子前执行，因此该函数中不能使用this(会得到undefined)

3、模板中（视图）需要使用的数据和函数，都需要在setup中返回

4、当使用vue3的组合API写法时，不建议用vue2的钩子做一些事情

5、vue3中的生命周期钩子

setup 创建实例前

onBeforeMount  挂载DOM前

onMounted  挂载DOM后

onBeforeUpdate  更新组件前

onUpdated  更新组件后

onBeforeUnmount  卸载销毁前

onUnmounted  卸载销毁后

 6、setup里不能使用async函数修饰符，里面的函数不能使用await

张美丽呀
关注
专栏目录
四、vue3.0之setup函数的理解
张先森的博客
06-09 2482
vue3.0之setup函数的理解
Vue-3.0
sunhy007的博客
07-13 395
1. vue3与vue2的区别 性能提高 ，更支持ts， 增加Composition API, 移除$on ，移除过滤器 ，移除.snyc Vue3中，可以在template中写多个根元素； 核心代码不一样： createApp(根组件).mount(‘public/index.html中的div容器’) 创建vue3的项目：vue create 项目名 2. Composition API 组合式优点： 功能代码组合维护，分散定义，组合使用 ； 缺点：不方便功能复用 3. optionAPI选
vue3.0 中setup 函数
weixin_45677987的博客
05-07 1293
1： setup 函数新特性： 使用Composition API 启用函数； 2：在beforeCreate之前调用； 3： 在setup中没有this 指向问题。 4：可以返回一个对象，这个对象的属性被合并到渲染上下文，并可以在模板中直接使用； 5：接收props对象作为第一个参数，接收来的props对象，可以通过watchEffect监视其变化。 6: 接受context对象作为第二个参数，这个对象包含attrs，slots，emit三个属性。 7：...
vue3.0中setup使用(两种用法)
01-21
一、setup函数的特性以及作用 　　可以确定的是 Vue3.0 是兼容 Vue2.x 版本的 也就是说我们再日常工作中 可以在 Vue3 中使用 Vue2.x 的相关语法 但是当你真正开始使用 Vue3 写项目时 你会发现他比 Vue2.x 方便的多 　　Vue3 的一大特性函数 —- setup 　　1、setup函数是处于 生命周期函数 beforeCreate 和 Created 两个钩子函数之间的函数 也就说在 setup函数中是无法 使用 data 和 methods 中的数据和方法的 　　2、setup函数是 Composition API（组合API）的入口 　　3、在setu
Vue3中的Setup函数
最新发布
m0_51323460的博客
08-13 769
Setup是Vue3 的Composition API中的一个函数，它作为组件的入口点，提供了一种新的方式来组织组件的逻辑。setup函数在Vue 3的单文件组件（SFG）中使用，它允许开发者以更加灵活和声明性的方式编写软件。对于复杂的逻辑，可以创建自定义的组合函数，并将它们导入到中使用。// 在 <script setup> 中使用。
Vue3.0的setup函数
前端打工人的博客
10-21 2777
setup函数的特性： 使用Composition API 的入口 在beforeCreate之前调用 在setup中没有this 可以返回一个对象，这个对象的属性被合并到渲染上下文，并可以在模板中直接使用； 接收props对象作为第一个参数，接收来的props对象，可以通过watchEffect监视其变化。 接受context对象作为第二个参数，这个对象包含attrs，slots，emit三个属性。 setup 函数是个新的入口函数，相当于 vue2.x 中 beforeCreate 和 create
vue3中的setup()函数详解
唯见青山不见君
11-29 1万+
vue3中的setup()函数详解
vue3中的setup函数
热门推荐
韩旭不会敲代码吧的博客
12-09 4万+
Vue3.0—setup
Guuiabc的博客
02-03 174
attrs:值为对象，包含：组件外部传递过来，但没有在props配置中声明的属性, 相当于```this.$attrs```。- Vue2.x配置（data、methos、computed...）中可以访问到setup中的属性、方法。- 但在setup中不能访问到Vue2.x配置（data、methos、computed...）。- emit: 分发自定义事件的函数, 相当于 ```this.$emit```。- slots:收到的插槽内容, 相当于 ```this.$slots```。
Vue3.0 setup的使用及作用
m0_60970928的博客
02-09 2160
setup用来写组合式api，从生命周期的角度，相当于取代了beforeCreate()​1. 这个函数会在created之前执行2. setup内部没有this，不能挂载相关的东西3. setup内部的属性和方法，必须return暴露出来。(语法糖不需要)4. setup内部的属性都不是响应式的5. setup不能调用生命周期相关函数，但生命周期相关函数可以调用setup以上就是Vue3.0 setup的使用及作用。希望本篇文章能够帮助到你，不懂得可以评论区或者私信问我，我也会一 一解答。
Vue3 -- setup函数
Sun_blog
07-11 5022
文章目录setup函数代码演示模板使用setup数据模板使用setup方法尝试在setup中使用thismethods调用setupsetup参数setup数据不具备响应式完整代码总结 setup函数 setup是组件内使用CompositionAPI的入口； setup在created实例被完全初始化之前执行，所以在setup中不使用this； setup返回值的数据（方法）模板可以直接使用； setup有两个参数，props 和 context setup数据不具备响应式 代码演示 模板使用setu
vue的setup函数
qq_42309685的博客
08-13 1万+
组合式API（setup） 作用：将同一逻辑关注点代码收集 setup 使用 setup 函数时，它将接受两个参数 props context Props props 是 setup 函数中的第一个参数，props 是用 Proxy 包裹的一个响应式数据，当传入新的 props时，它将被更新。 需要注意的是：因为 props 是响应式的，不能使用 ES6 结构，因为解构会消除 props 的响应性。 如果需要解构 props，可以在 setup 函数中使用 toRef 函数来完成此操作： i
Vue3.0 setup函数
weixin_45433904的博客
11-18 375
Vue3.0 setup函数
vue3.0——setup函数/属性、响应式API、ref函数、reactive函数、响应式原理、计算属性
qq_56668869的博客
09-16 1686
setup函数/属性、响应式API、ref函数、reactive函数、响应式原理、计算属性
Vue3_03_setup函数
小白的成长之路
08-02 267
若返回一个对象，则对象中的属性、方法，在模板中均可以直接使用（重点关注！3.组件中所用到的：数据、方法等等，均要配置在setup中。1.理解：Vue3.0 中的一个新的配置项，值为一个函数。2.setup是所有组合式 API 表演的舞台。
vue3.0 setup 用法 (详解)
weixin_47863547的博客
11-25 4118
vue3新语法糖——setup setup函数是 Composition API（组合API）的入口 在setup函数中定义的变量和方法最后都是需要 return 出去的不然无法在模板中使用 setup函数的注意点： 1、由于在执行 setup函数的时候，还没有执行 Created 生命周期方法，所以在 setup 函数中，无法使用 data 和 methods 的变量和方法 2、由于我们不能在 setup函数中使用 data 和 methods，所以 Vue 为了避免我们错误的使用，直接将 setup
Vue setup函数
征战无悔人生
05-13 411
Vue setup函数简单使用
Vue -- setup函数
Sun_blog
06-28 59
持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第29天，点击查看活动详情 setup函数 setup是组件内使用CompositionAPI的入口； setup在created实例被完全初始化之前执行，所以在setup中不使用this； setup返回值的数据(方法)模板可以直接使用； setup有两个参数，props 和 context setup数据不具备响应式 ...
vue3.0中setup
07-22
使用axios在Vue3.0的setup中需要先安装axios库，并在需要使用axios的组件或页面中导入axios，然后在setup函数中通过ref或reactive定义一个响应式的数据state，最后在需要发送请求的函数中通过axios发送请求并修改...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值