一文了解setup的含义以及使用方法？

最新推荐文章于 2025-03-22 14:19:03 发布

嘉ioo

最新推荐文章于 2025-03-22 14:19:03 发布

阅读量2.8k

点赞数 1

文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/weixin_61029090/article/details/130230182

版权

本文详细介绍了Vue3中的setup函数，包括它的定义、调用时机、使用方式以及注意事项。setup作为Vue3的一个新语法糖，简化了组件的编写，它在beforeCreate钩子之前被调用，接受props和context参数。在setup中，this被设置为undefined，props是响应式的但不建议使用ES6解构。同时，返回的对象可以在模板中直接访问，而不需要.value。注意setup内创建响应式数据需通过ref或 reactive，且setup必须是同步的。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

提示：以下是本篇文章正文内容，下面案例可供参考

一、`setup`是什么？

setup就是Vue3的一个新的语法糖，在setup函数中，所有的ES模块导出都被认为是暴露给上下文的值，并且包含在setup()返回对象中，那么相对于之前的写法，使用之后呢也会变得更加简单
注意：

如果将setup写在script标签中的话，那么内容就不再需要去暴露
如果使用setup()这种形式去写，就会需要return去进行暴露

二、调用的`时机`

创建组件实例，然后初始化props，紧接着就调用setup函数。从生命周期钩子的视角来说，它会在beforeCreate钩子之前被调用

三、`setup`的使用

<template>
  <div class="sett">
    <h1>{
   {
    msg }}</h1>
    <h2>{
   {
    obj.name }}</h2>
    <h2>{
   {
    obj.age }}</h2>
    <p>{
   {
    obj.todo[0] }}</</