前言

随着vue 3的发布，新增和大改了很多的东西，像响应式的修改、option Api改为components Api、setup语法糖等等，vue 3的发布可以说是令人不得不爱❤️，相较于v2我是比较喜欢v3的。言归正传，本文的主人公不是别的，是v3中使用起来超nice的setup语法糖。

简介

setup 是在单文件组件 (SFC) 中使用组合式 API 的编译时的一个语法糖。当同时使用 SFC 与组合式 API 时该语法是默认推荐。

优势：

更少的样板内容，更简洁的代码。
能够使用纯TypeScript声明props和自定义事件。
更好的运行时性能 (其模板会被编译成同一作用域内的渲染函数，避免了渲染上下文代理对象)。
更好的 IDE 类型推导性能 (减少了语言服务器从代码中抽取类型的工作)。

使用

1
2
3

<script setup>
...
</script>

其实在v3刚出来的时候还并不能这样写，他需要像下面这样写。

<script>
export default {
    setup () {
        const name = ''
        return {
            name
        }
    }
}
</script>

从3.2的版本开始后我们就可以像最开始那样在SFC但文件中写了。这样写真的超方便，我们不用在return出去我们的方法和变量，但需要注意的是setup这玩意中是没有this这种东西的，为啥呢？我们看一下vue的生命周期图。

我们从上面的图中可以发现，setup在renderer后就会执行，此时vue还没有进行init Options Api，也就是组件实例未被创建/解析前，所以是不存在this的。

相关拓展

Components 注册使用

在之前的版本我们需要引入组件并且注册后才可以在template模版中使用，但在setup中，我们无需注册，只需要引入就可以使用。但有个弊端就是，无法重命名组件；组件名需要以大驼峰的形式；如果想要重命名组件名字的话只能写两个script标签来实现。

<template>
    <div>
        <span>我是父组件</span>
        <br />
        <Child></Child>
    </div>
</template>

<script setup>
import Child from "./components/child.vue"

</script>

Props

props这一块和vue2的区别不是很大，父组件还是一样，只是子组件有些变化。我们在子组件中需要通过defineProps来声明我们父组件可以传递的props，然后我们在子组件中进行使用。

<template>
    <div>
        <span>我是子组件: {{ message }}</span>
    </div>
</template>

<script setup>
import { defineProps } from 'vue';

const props = defineProps({
    message: {
        type: String,
        default: ''
    }
})

</script>

这里之所以要声明一个变量来接收defineProps，是因为template模版可以为我们自动解析，但script标签内并不会，如果我们需要在script内使用的话是用不到的。

1	console.log(message)

但我们如果通过接收defineProps的变量来获取是可以获取到的。这里需要注意的是跟v2一样，props里的值子组件不可更改。

1	console.log(props.message)

emit

emit事件注册。跟props一样，需要通过defineEmits来注册。emit + props是vue中常用的一种父子组件通信方式。

该方法接受一个事件名的数组，在调用时进行指定事件名和回调参数。

const emit = defineEmits(['init'])

setTimeout(() => {
    emit('init', 1222)
}, 2000);

父组件

<template>
    <div>
        <span>我是父组件</span>
        <br />
        <Child message="我是父组件传递的 msg 值" @init="init"></Child>
    </div>
</template>

<script setup>
import Child from "./components/child.vue"

const init = (event) => {
    console.log(event);
}

</script>

ref

此ref非彼ref，这里指的是ref(引用)。别搞混了，各位客官。

通过ref引用我们可以很便捷的操作和获取子组件内的变量或者方法。我们需要像ref响应式一样声明，然后在子组件上挂载使用。

<template>
    <div>
        <span>我是父组件</span>
        <br />
        <Child ref="myChild" message="我是父组件传递的 msg 值" ></Child>
    </div>
</template>

<script setup>
import Child from "./components/child.vue"

const myChild = ref(null)

</script>

一起猜猜下面代码打印出来的内容是啥。

1
2
3

setTimeout(()=>{
    console.log(myChild.value.name);
}, 1000)

到了万众瞩目的时刻了，公布期待已久的结果，看看你有没有猜对。

答案是：undefined。

为了让你们死心，给你看看子组件的内容，我是没改过的。

<template>
    <div>
        <span>我是子组件: {{ message }}</span>
        <span>{{ name }}</span>
    </div>
</template>

<script setup>
import { defineProps } from 'vue';

const props = defineProps({
    message: {
        type: String,
        default: ''
    }
})

const name = '我是子组件：张三'


</script>