持续创作,加速成长!这是我参与「掘金日新计划 · 6 月更文挑战」的第1天,点击查看活动详情
a.前言
1.由于写作目的是面向小白的vue3系列课程,所以门槛比较低,大佬勿喷,如果有兴趣的话可以接着往下看,后期会更新
系列文章,真正的从入门到熟悉到精通,一步一步 循序渐进
b.什么是setup?
1.你只需要知道setup 是vue3的一个配置项就可以,至于‘组合式API’ 这个名字 对于新手来说不太友好感兴趣的可以去
自行了解
c.setup做了什么事?
1.setup 是官方推荐的一个简化配置项写法的配置,一句话理解就是简化了vue2里面配置项请看代码
Vue2中 你可能需要以下配置
<script>
data(){
return {}
},
method: {},
created: {}
.......
</script>
有了setUP这个配置之后我们可以看到 vue2里面 data的数据我们可以直接使用let 写在里面 一些方法也可以直接写,只不过最最重要的就是一定要使用return 返回,不然得话组件身上是接收不到的
<script>
setup() {
let a = 1,
let b = 2,
let c = 3,
funtion fn() {
console.log(setup)
}
return {
a,
b,
c,
fn
</script>
d.注意点
1.需要注意的是你如果在setup里面定义了变量 以及函数或者方法,那么当你使用这些函数或者方法调用这些变量的时候按照vue2de 写法可能需要this.XX的形式去使用,但是在vue3的这个配置里面不要需要this.xx。因为当你在控制台打印this的时候你会发现是underfind
setup() {
funtion fn () {
console.log(this)
return {
fn
}
}
2.第二点需要注意的就是 一定切记要写return 返回他的值 3.对于返回函数的类型有两种,这里说的普通函数就是常用的一种,另一种不常用的就不说了 4.setup的两个参数 一个是props 一个是content 全局上下文,这个需要了解两个 响应式方法后在说,后面也会讲到
e 总结
1.setup 是一个vue3的配置项 简化了Vue2的操作 2.他的返回值有两种,一种是普通函数,列一种是 从vue引进来的h 3.他可以以接收两个参数 props 和content