一文读懂Vue3入门之setup

324 阅读2分钟

持续创作,加速成长!这是我参与「掘金日新计划 · 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(thisreturn {
    fn
    }
}

2.第二点需要注意的就是 一定切记要写return 返回他的值 3.对于返回函数的类型有两种,这里说的普通函数就是常用的一种,另一种不常用的就不说了 4.setup的两个参数 一个是props 一个是content 全局上下文,这个需要了解两个 响应式方法后在说,后面也会讲到

e 总结

1.setup 是一个vue3的配置项 简化了Vue2的操作 2.他的返回值有两种,一种是普通函数,列一种是 从vue引进来的h 3.他可以以接收两个参数 props 和content