一、简介

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对象中的属性；

vue3中的setup

一、简介

二、setup中的两种返回值

猜你喜欢