vue3中的setup

最新推荐文章于 2025-06-17 10:48:49 发布

frontEndSmallWhite

最新推荐文章于 2025-06-17 10:48:49 发布

阅读量9.9k

点赞数 3

CC 4.0 BY-SA版权

分类专栏： vue 文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/weixin_46376652/article/details/126091438

vue 专栏收录该内容

28 篇文章

订阅专栏

本文介绍了Vue3中新增的setup函数，它是所有Composition API的基础。setup中可以配置组件的数据和方法，有两种返回方式：返回对象供模板直接使用，或者返回渲染函数自定义渲染内容。同时，文章提醒开发者注意Vue3与Vue2.x配置项的兼容性和使用规则，避免混用导致的问题。

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

一、简介

二、setup中的两种返回值

一、简介

1、setup是vue3中的一个全新的配置项，值为一个函数；

2、setup是所有CompositionAPI（组合API）的基础，组件中所用到的数据、方法等都需要在setup中进行配置；

二、setup中的两种返回值

1、返回一个对象，对象中的属性、方法，在模板中均可直接使用（重点）

export default {
  name: 'App',
  setup(){
    // 数据
    let name = '张三'
    let age = '18'

    // 方法
    function sayHello(){
      alert(`我叫${name},我${age}岁了，你好啊`)
    }

    // 第一种return，返回一个对象
    return{
      name,
      age,
      sayHello
    }
  }
}

2、返回一个渲染函数：可以自定义渲染内容（了解）

export default {
  name: 'App',
  setup(){
    // 数据
    let name = '张三'
    let age = '18'

    // 方法
    function sayHello(){
      alert(`我叫${name},我${age}岁了，你好啊`)
    }

    // 第二种return，返回一个渲染函数
    return ()=> { return h('h1','尚硅谷') }

    // 简写
    // return ()=> h('h1','尚硅谷') 
  }
}

3、注意点：

①、vue3支持向下兼容，vue2中的data、methods配置项在vue3中都能够使用，但是尽量不要将vue3中的配置项和vue2.x配置项混用；

②、vue2.x配置（data、methods、computed等）中可以访问setup中的属性、方法，但是在setup中不能访问vue2.x配置（data、methods、computed等）；

③、如果vue2.x配置与vue3配置存在重名，则以setup优先；

④、setup不能是一个async函数，因为返回值不再是return的对象，而是promise，模板看不到return对象中的属性；