Vue-3.0 setup函数

原创 已于 2022-07-04 17:29:28 修改 · 302 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js

于 2022-06-30 20:50:37 首次发布
本文深入探讨了Vue3中的setup函数，它是组合API的起点，执行于beforeCreate钩子之前，不能直接使用this。setup中声明的数据和函数将供模板使用。在vue3中，推荐使用新的组合API而非vue2的生命周期钩子。文章还列举了vue3的主要生命周期钩子，如onBeforeMount、onMounted等，并指出setup内不支持async/await。

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 2629
vue3.0之setup函数的理解
Vue3.0教程003：setup语法糖
WwLK123的博客
01-30 909
刷新浏览器，发现点击【修改姓名】和【修改年龄】按钮，发现页面无变化，这是因为此时的数据定义式。当定义的数据和方法较多的时候，都要用return进行返回，就显得十分不方便。可以用函数的方式，更加优雅的组织代码，让相关功能的代码更加有序的组织在一起。确实修改了，但是因为不是响应式的，所以页面无变化。注意：vue3.3版本以上的，不需要安装插件，可以直接修改。通过定义如下代码，直接在其中定义数据和方法，然后用。可以直接访问到，避免了用。那么如果，想要只写一个。，不便于维护和复用。语法糖，来解决问题。
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
Vue setup函数
征战无悔人生
05-13 557
Vue setup函数简单使用
Vue3.0的setup函数
前端打工人的博客
10-21 2839
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.0 setup的使用及作用
m0_60970928的博客
02-09 2338
setup用来写组合式api，从生命周期的角度，相当于取代了beforeCreate()​1. 这个函数会在created之前执行2. setup内部没有this，不能挂载相关的东西3. setup内部的属性和方法，必须return暴露出来。(语法糖不需要)4. setup内部的属性都不是响应式的5. setup不能调用生命周期相关函数，但生命周期相关函数可以调用setup以上就是Vue3.0 setup的使用及作用。希望本篇文章能够帮助到你，不懂得可以评论区或者私信问我，我也会一 一解答。
精选资源
vue调试工具-vue3.0-6.0.0-beta-15
10-29
2. **Setup 与 Options API 结合**：Vue 3 允许在同一个组件中混合使用setup函数（Composition API）和传统的Options API。DevTools将展示这两种API的组件数据。 3. **Suspense 组件**：Vue 3 添加了Suspense组件，...
vue3中的setup函数
热门推荐
韩旭不会敲代码吧的博客
12-09 4万+
vue3.0 中setup 函数
weixin_45677987的博客
05-07 1368
1： setup 函数新特性： 使用Composition API 启用函数； 2：在beforeCreate之前调用； 3： 在setup中没有this 指向问题。 4：可以返回一个对象，这个对象的属性被合并到渲染上下文，并可以在模板中直接使用； 5：接收props对象作为第一个参数，接收来的props对象，可以通过watchEffect监视其变化。 6: 接受context对象作为第二个参数，这个对象包含attrs，slots，emit三个属性。 7：...
Vue3.0—setup
Guuiabc的博客
02-03 261
attrs:值为对象，包含：组件外部传递过来，但没有在props配置中声明的属性, 相当于```this.$attrs```。- Vue2.x配置（data、methos、computed...）中可以访问到setup中的属性、方法。- 但在setup中不能访问到Vue2.x配置（data、methos、computed...）。- emit: 分发自定义事件的函数, 相当于 ```this.$emit```。- slots:收到的插槽内容, 相当于 ```this.$slots```。
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 472
Vue3.0 setup函数
vue3.0——setup函数/属性、响应式API、ref函数、reactive函数、响应式原理、计算属性
qq_56668869的博客
09-16 1852
setup函数/属性、响应式API、ref函数、reactive函数、响应式原理、计算属性
Vue3_03_setup函数
小白的成长之路
08-02 334
若返回一个对象，则对象中的属性、方法，在模板中均可以直接使用（重点关注！3.组件中所用到的：数据、方法等等，均要配置在setup中。1.理解：Vue3.0 中的一个新的配置项，值为一个函数。2.setup是所有组合式 API 表演的舞台。
vue3.0 setup 用法 (详解)
weixin_47863547的博客
11-25 4512
vue3新语法糖——setup setup函数是 Composition API（组合API）的入口 在setup函数中定义的变量和方法最后都是需要 return 出去的不然无法在模板中使用 setup函数的注意点： 1、由于在执行 setup函数的时候，还没有执行 Created 生命周期方法，所以在 setup 函数中，无法使用 data 和 methods 的变量和方法 2、由于我们不能在 setup函数中使用 data 和 methods，所以 Vue 为了避免我们错误的使用，直接将 setup
Vue -- setup函数
Sun_blog
06-28 148
持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第29天，点击查看活动详情 setup函数 setup是组件内使用CompositionAPI的入口； setup在created实例被完全初始化之前执行，所以在setup中不使用this； setup返回值的数据(方法)模板可以直接使用； setup有两个参数，props 和 context setup数据不具备响应式 ...
vue3中setup的作用是什么？
2302_80729149的博客
11-05 1899
我们可以在setup函数中声明响应式的数据和计算属性、注册事件处理函数、定义生命周期钩子函数、注册子组件、访问父级组件的属性和方法，以及访问路由和状态管理器等全局对象。Vue 3.0中的setup函数是一个全新的选项，它是在组件创建时执行的一个函数，用于替代Vue2.x中的beforeCreate和created钩子函数。在上面的代码中，我们使用provide函数提供了一个名为increment的函数，并在子组件中使用inject函数获取该函数。在setup函数中，我们返回了一个空对象。
BrowserPrint-3.0.216.min.js 引入VUE3文件中
最新发布
11-04
在Vue 3文件中引入 `BrowserPrint-3.0.216.min.js` 文件有以下几种方法： ### 全局引入 在项目的入口文件 `index.html` 中使用 `<script>` 标签引入该脚本，这样脚本在整个项目中都可以使用。 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="icon" href="/favicon.ico"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Vue 3 App</title> </head> <body> <div id="app"></div> <!-- 假设BrowserPrint-3.0.216.min.js文件在public目录下 --> <script src="BrowserPrint-3.0.216.min.js"></script> <script type="module" src="/src/main.js"></script> </body> </html> ``` ### 在组件中静态导入 如果 `BrowserPrint-3.0.216.min.js` 是一个ES模块，并且导出了一些功能，可以在Vue组件中使用 `import` 语句导入。假设该文件导出了一个名为 `printFunction` 的函数： ```vue <template> <div> <!-- 组件内容 --> </div> </template> <script> import { printFunction } from &#39;./path/to/BrowserPrint-3.0.216.min.js&#39;; export default { setup() { printFunction(); return {}; } } </script> ``` 如果使用 `<script setup>` 语法糖： ```vue <template> <div> <!-- 组件内容 --> </div> </template> <script setup> import { printFunction } from &#39;./path/to/BrowserPrint-3.0.216.min.js&#39;; printFunction(); </script> ``` ### 动态加载脚本 在组件挂载后，手动操作DOM插入script文件。 ```vue <template> <div> <!-- 组件内容 --> </div> </template> <script> export default { mounted() { let script = document.createElement(&#39;script&#39;); script.type = &#39;text/javascript&#39;; script.src = &#39;path/to/BrowserPrint-3.0.216.min.js&#39;; document.body.appendChild(script); } } </script> ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值