vue3 setup使用（详细）

怼烎@ 2023-01-19 12:56 9阅读 0赞

官网[vue3-setup][]

### 总结： ###

1、setup 函数时，它将接受两个参数：（props、context(包含attrs、slots、emit)）

2、setup函数是处于 生命周期函数 beforeCreate 和 Created 两个钩子函数之前的函数

3、执行 setup 时，组件实例尚未被创建（在 setup() 内部，this 不会是该活跃实例的引用，即不指向vue实例，Vue 为了避免我们错误的使用，直接将 setup函数中的this修改成了 undefined）

4、与模板一起使用：需要返回一个对象 (在setup函数中定义的变量和方法最后都是需要 return 出去的 不然无法再模板中使用)

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

**注意事项：**

1、setup函数中不能使用this。Vue 为了避免我们错误的使用，直接将 setup函数中的this修改成了 undefined）

2、setup 函数中的 props 是响应式的，当传入新的 prop 时，它将被更新。但是，因为 props 是响应式的，你不能使用 ES6 解构，因为它会消除 prop 的响应性。

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

import { toRefs } from 'vue'
    
    setup(props) {
    	const { title } = toRefs(props)
    
    	console.log(title.value)
    }

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

export default {
      setup(props, { attrs, slots, emit }) {
        ...
      }
    }

3、 setup()内使用响应式数据时，需要通过.value获取

import { ref } from 'vue'
    
    const count = ref(0)
    console.log(count.value) // 0

4、从 setup() 中返回的对象上的 property 返回并可以在模板中被访问时，它将自动展开为内部值。不需要在模板中追加 .value

5、setup函数只能是同步的不能是异步的

暂时知道这么多，后面如果有发现会补充，也欢迎小伙伴儿们留言补充

[vue3-setup]: https://v3.cn.vuejs.org/guide/composition-api-setup.html#%E8%AE%BF%E9%97%AE%E7%BB%84%E4%BB%B6%E7%9A%84-property

发表评论取消回复

表情：

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

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

相关阅读

相关 Vue3 setup寫法

好的，这是 Vue 3 的 setup 函数的一个简单示例： import { createApp } from 'vue'; const app

深碍√TFBOYSˉ_/ 2024年03月25日 16:10/ 0 赞/ 50 阅读

相关 Vue3-script-setup

教程使用的版本 vue: 3.2.31 typescript: 4.1.6 前言 Options API 约定：我们需要在 props 里面设置接收参数

客官°小女子只卖身不卖艺/ 2023年10月02日 18:06/ 0 赞/ 9 阅读

相关 vue3 setup使用（详细）

官网[vue3-setup][] 总结： 1、setup 函数时，它将接受两个参数：（props、context(包含attrs、slots、emit)） 2、set

Bertha 。/ 2023年09月30日 07:29/ 0 赞/ 61 阅读

相关 Vue3 Composition API - setup

> Vue3 推荐的组合式 Composition API 相较于选项式 Options API，使用更加灵活、逻辑更加清晰、易于维护、重用。 > 具体用法详见：[官方文档

淡淡的烟草味﹌/ 2023年03月02日 10:49/ 0 赞/ 37 阅读

相关 vue3 setup使用（详细）

官网[vue3-setup][] 总结： 1、setup 函数时，它将接受两个参数：（props、context(包含attrs、slots、emit)） 2、set

怼烎@/ 2023年01月19日 12:56/ 0 赞/ 10 阅读

相关 vue3 中 script setup

在不使用`<script setup>`,我们代码是： <template> <h1 v-text="count"></h1> <p v-text

迈不过友情╰/ 2022年10月09日 03:27/ 0 赞/ 203 阅读

相关 Vue3（setup函数介绍）

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

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

相关 Vue3里的setup中使用vuex

useStore 这里我们可以直接从vuex 4.X中解构出useStore方法，就可以在setup中使用vuex的相关函数 template 使用$store

Bertha 。/ 2021年09月07日 08:54/ 0 赞/ 976 阅读

相关 vue3.0中setup使用

setup 　　1、 beforeCreate：表示组件刚刚被创建出来，组件的data和methods还没有初始化好

た入场券/ 2021年09月02日 10:24/ 0 赞/ 596 阅读

相关 vue3.0 setup

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

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