vue3 setup使用（详细）

Bertha 。 2023-09-30 07:29 28阅读 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 条评论，28人围观）

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

相关阅读

相关 Vue3 setup寫法

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

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

相关 vue3 setup使用（详细）

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

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

相关 vue3.0 setup 模块化使用例子

一、模块化开发因为vue3.0 添加了一个组合api setup,这个方法对我来说最大的用处就是一个vue的页面可以通过import导入的方式来模块化开发，在vue2

小灰灰/ 2023年01月20日 04:00/ 0 赞/ 148 阅读

相关 Vue3 Composition API（setup函数）

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

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

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

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

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

相关 vue3 中 script setup

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

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

相关 Vue3（setup函数介绍）

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

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

相关 Vue3里的setup中使用vuex

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

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

相关 vue3.0中setup使用

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

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

相关 vue3.0 setup

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

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