一、概念：

setup是vue3中的一个新的配置项，值为一个函数，我们在组件中用到的数据、方法等等，都要配置在setup中。

二、详解：

setup函数的返回值有两种
1、返回一个渲染函数，可以自定义渲染内容(用得不多，了解即可)

import {h} from 'vue'
...
setup() {...return () => h('h1','学习')
}

2、返回一个对象，对象中的属性和方法在模板中可以直接使用
（1）在vue2的配置中可读取到vue3配置中的属性和方法

methods: {test1() {console.log(this.sex);console.log(this.sayHello);}
},
setup() {const sex = ref('女')function sayHello() {alert('你好啊')}return {sex,sayHello}
}

（2）在vue3的配置中不能读取vue2配置中的属性和方法

data() {return {sex:'男'}
},
methods: {sayHello() {alert('你好啊')}
},
setup() {function test2() {console.log(this.sex);console.log(this.sayHello);}return {test2}
}

（3）如果vue2和vue3的配置有冲突，则vue3的setup优先

data() {return {sex:'男'}
},
setup() {const sex = ref('女')return {sex}
}

注意点：
（1）vue2和vue3的配置尽量不要混用
（2）setup不能是一个async函数，因为返回值不再是return的对象, 而是promise, 模板看不到return对象中的属性。（后期也可以返回一个Promise实例，但需要Suspense和异步组件的配合）

三、两个注意点

1、setup执行的时机

在beforeCreate之前执行一次，this是undefined。

beforeCreate(){console.log('beforeCreate');
},
setup(){console.log('setup',this);
}

2、setup的参数

1、props：值为对象，包含：组件外部传递过来，且组件内部声明接收了的属性。
在父组件中给子组件传递数据

<Demo msg="你好啊" name="tom" />

在子组件中接收

props:['msg','name'], // 需要声明一下接受到了，否则会报警告
setup(props){console.log(props)
}

并且接收到的数据被包装成一个代理对象，能够实现响应式。

2、context：上下文对象
1、attrs: 值为对象，包含：组件外部传递过来，但没有在props配置中声明的属性, 相当于 this.$attrs。

父子组件通信过程中，父组件把数据传递过来，如果子组件没有用props进行接收，就会出现在attrs中，而vm中没有

如果用props接收了，则会出现在vm上而attrs中没有

props:['msg','name']

2、emit: 分发自定义事件的函数, 相当于 this.$emit。
在父组件中给子组件绑定一个事件

<Demo @hello="showHelloMsg">

在子组件中触发事件并且可以传值过去

emits:['hello'], // 要声明接收到了hello事件，否则会报警告
context.emit('hello',666)

3、slots: 收到的插槽内容, 相当于 this.$slots。

<Demo><template v-slot:qwe><span>你好</span></template>
</Demo>

vue3里面具名插槽用v-slot:

vue3中的setup函数相关推荐

Vue3中的setup前加上async后页面不显示
问题: Vue3项目中,在setup函数前加上了async,使其变成异步函数,导致页面空白不显示? 描述: 最近在学习Vue3项目,使用了CompositionAPI的书写方式,其中有一个setup函 ...
vue2.x的h函数(createElement)与vue3中的h函数
1. vue2.x的 h 函数(createElement) 使用方法及介绍:(参考官网提取) h函数第一个是标签名字或者是组件名字,第二个参数是配置项,第三个参数是 innerText ,不会帮你 ...
vue3组合式Composition API之setup函数的具体用法
vue3拉开序幕的setup 理解:Vue3.0中一个新的配置项,值为一个函数. setup是所有Composition API(组合API)" 表演的舞台 ". 组件中所用到的: ...
Vue中setup函数
介绍 Vue3中使用setup函数取代methods和data 效果代码 <!DOCTYPE html> <html lang="en"> <hea ...
vue3.0js 非prop属性的值和setup函数的使用
非prop属性的值一个非 prop 的 attribute 是指传向一个组件,但是该组件并没有相应 prop 定义的 attribute. 因为显式定义的 prop 适用于向一个子组件传入信息,然而 ...
Vue3中Vuex的使用
Vuex是做什么的? Vue官方:状态管理工具状态管理是什么? 需要在多个组件中共享的状态.且是响应式的.一个变,全都改变. 例如一些全局要用的的状态信息:用户登录状态.用户名称.地理位置信息.购物 ...
Python setup()函数使用
python 有很方便的包管理工具 pip, 实际上任何第三方包都可以通过从对应的pip源一键下载安装,并将其所有的依赖(requirements)自动安装.安装第三方包的本质是可以通过一个方便的方法 ...
vue3中setup()函数的使用二
vue3的使用 <template><div id="one"><img src="http://127.0.0.1:9000/upload ...
vue3中setup()函数的使用一
<template><div id="one"><img src="http://127.0.0.1:9000/upload/001.png ...

vue3中的setup函数