前端小Ken:Vue 3 setup 函数

亦凉 2022-12-21 00:45 156阅读 0赞

setup 函数可以说是 Vue 3 一个入口函数。

参数使用 setup 函数时，它将接受两个参数：

props

context

让我们更深入地研究如何使用每个参数。

Propssetup 函数中的第一个参数是 props。正如在一个标准组件中所期望的那样，setup 函数中的 props 是响应式的，当传入新的 prop 时，它将被更新。我们还是在 src/TemplateM.vue：

counter —> \{ \{ counter \}\}

复制代码

但是，因为 props 是响应式的，你不能使用 ES6 解构，因为它会消除 prop 的响应性。

我们可以尝试一下将 props 进行 ES6 解构，看看会发生什么情况：

counter —> \{ \{ counter \}\}

test.name —> \{ \{ test.name \}\}

name —> \{ \{ name \}\}

复制代码

我们看到控制台开始提示报警了：

" alt="" width=“28” height=“30” align="">

如果需要解构 prop，可以通过使用 setup 函数中的 toRefs 来安全地完成此操作。

counter —> \{ \{ counter \}\}

test[.][]name —> \{ \{ test.name \}\}

name —> \{ \{ name \}\}

复制代码

这次我们可以看到效果如下：

" alt="" width=“28” height=“30” align="">

上下文传递给 setup 函数的第二个参数是 context。context 是一个普通的 JavaScript 对象，它暴露三个组件的 property：

复制代码

我们可以看到效果如下：

" alt="" width=“28” height=“30” align="">

context 是一个普通的 JavaScript 对象，也就是说，它不是响应式的，这意味着你可以安全地对 context 使用 ES6 解构。

setup(props, \{ attrs, slots, emit \}) \{ …\}复制代码

注意attrs 和 slots 是有状态的对象，它们总是会随组件本身的更新而更新。这意味着你应该避免对它们进行解构，并始终以 attrs.x 或 slots.x 的方式引用 property。请注意，与 props 不同，attrs 和 slots 是非响应式的。如果你打算根据 attrs 或 slots 更改应用副作用，那么应该在 onUpdated 生命周期钩子中执行此操作。

访问组件的 property执行 setup 时，组件实例尚未被创建。因此，你只能访问以下 property：

props

attrs

slots

emit

换句话说，你将无法访问以下组件选项：

data

computed

methods

结合模板使用如果 setup 返回一个对象，则可以在组件的模板中像传递给 setup 的 props property 一样访问该对象的 property：

\{ \{ readersNumber \}\} \{ \{ book.title \}\}

复制代码

我们可以看到效果如下：

" alt="" width=“28” height=“30” align="">

注意，从 setup 返回的 refs 在模板中访问时是被自动解开的，因此不应在模板中使用 .value。

使用渲染函数setup 还可以返回一个渲染函数，该函数可以直接使用在同一作用域中声明的响应式状态：

复制代码

效果如下：

" alt="" width=“28” height=“30” align="">

使用 this在 setup() 内部，this 不会是该活跃实例的引用，因为 setup() 是在解析其它组件选项之前被调用的，所以 setup() 内部的 this 的行为与其它选项中的 this 完全不同。这在和其它选项式 API 一起使用 setup() 时可能会导致混淆。

作者：前端小Ken

链接：https://juejin.im/post/6894210683555348494

来源：掘金

著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

[.]: http://www.chinawenhui.net/gaoxiao/

发表评论取消回复

表情：

评论列表（有 0 条评论，156人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue3 Composition API（setup函数）

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。本文链接：https://blog.csdn.net/qq\_45

柔光的暖阳◎/ 2023年01月16日 09:50/ 0 赞/ 118 阅读

相关前端小Ken:Vue 3 setup 函数

setup 函数可以说是 Vue 3 一个入口函数。参数使用 setup 函数时，它将接受两个参数： props context 让我们更深入地研究如何使用每个参数。

亦凉/ 2022年12月21日 00:45/ 0 赞/ 157 阅读

相关 ③Vue3 Composition API（setup函数）

Vue3 Composition API介绍 setup函数基本使用方法 setup 中创建数据（ref）

落日映苍穹つ/ 2022年11月22日 05:15/ 0 赞/ 224 阅读

相关 Vue3---Vue3的setup函数中如何使用路由

方式一：通过 getCurrentInstance 方法获取当前组件实例，从而获取 route 和 router <template> <div

怼烎@/ 2022年10月29日 10:21/ 0 赞/ 608 阅读

相关 Vue3的Composition API 之 Setup函数

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <

ゝ一世哀愁。/ 2022年10月20日 13:47/ 0 赞/ 161 阅读

相关 VUE3(setup响应式函数系统API)

> Vue3.0提供的一组具有响应式特性的杉树式API，以函数的形式提供 > 1、reactive > reactive（）函数接收一个普通对象，返回该普通对象的响应式

墨蓝/ 2022年09月08日 14:00/ 0 赞/ 191 阅读

相关 Vue3（setup函数介绍）

> Composition Api > setup函数是一个新的组件选项。作为在组件内使用Composition API的入口点。 > 调用时机： > setup函

ゝ一纸荒年。/ 2022年09月08日 13:56/ 0 赞/ 116 阅读

相关 Vue3---浅谈setup函数

setup函数执行时机位于 beforeCreate 和 created 之前。该函数共有两个参数，第一个是props，可以拿到该组件定义的组件参数。第二个参数

太过爱你忘了你带给我的痛/ 2022年08月28日 11:51/ 0 赞/ 226 阅读

相关 setup_arch()函数分析3－request_standard_resources

文章来源:http://gliethttp.cublog.cn 在分析request\_standard\_resources前先来看linux对挂接在4G总线空间上的设备

布满荆棘的人生/ 2022年03月26日 15:20/ 0 赞/ 161 阅读

相关 vue3.0 setup

(1)setup函数是一个新的组件选项。作为在组件内使用 Composition API 的入口点 (2)之前的data、声明周期、自定义函数都可以放置在内

迷南。/ 2021年07月25日 01:54/ 0 赞/ 524 阅读