vue3中的setup函数用法及解读
一、概念
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和异步组件的配合）
三、两个注意点
setup执行的时机
在beforeCreate之前执行一次，this是undefined。
beforeCreate(){
console.log('beforeCreate');
},
setup(){
console.log('setup',this);
}
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:
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了用vue 实现手机触屏滑动的功能，文中通过示例代码给大家介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-05-05
这篇文章主要为大家详细介绍了Vue实现聊天界面，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-06-06
这篇文章主要为大家详细介绍了vue实现简单的日历效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-06-06
这篇文章主要介绍了vue.js+element 默认提示中英文实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-11-11
defineModel是Vue3.4引入的一个编译器宏,用于简化组件双向数据绑定的实现,它是对v-model指令在组件上使用的语法糖,本文给大家介绍Vue3全新特性defineModel的相关知识,感兴趣的朋友一起看看吧2025-08-08
在使用vue脚手架搭建前端工程时,经常会遇到打包上线后的缓存问题,许多开发者会直接在index.html中加入类似以下代码来解决缓存问题,本文通过实例代码给大家介绍的非常详细,需要的朋友参考下吧2023-11-11
文章介绍了Vue.js中的v-html指令及其潜在的安全风险,然后通过DOMParser实现了一个自定义的v-html组件,以提高安全性并避免XSS攻击2025-11-11
这篇文章主要为大家详细介绍了vue项目nav导航栏的实现方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-12-12
当页面刷新时,Vuex 的 state 数据会丢失,这是因为 Vuex 的状态存储在内存中,刷新浏览器会重置 JavaScript 的运行环境,下面我将详细介绍几种解决方案,从简单到复杂,帮助你根据项目需求选择最适合的方法,需要的朋友可以参考下2025-04-04
Vue 实时监听窗口变化 windowresize的两种方法
这篇文章主要介绍了Vue 实时监听窗口变化 windowresize的两种方法，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下2018-11-11
最新评论