Vue3 - setup script超爽体验，你值得一试

前言

Vue3已经发布很长一段时间了，相信大多数前端人都已经上手把玩过了，其中比较大的一个特性就是setup方法，可让咱们很是直观和方便的组合咱们的业务逻辑和hooks。在setup里面返回的变量能够直接在template里面使用。大多数状况下，咱们的大部分逻辑都集中在setup方法里面，因此官方提供了一个实验性的写法，直接在script里面写setup的内容，即：setup script。

使用

咱们以前的组件多是这样的：

<template>
  <div class="flex items-center justify-center h-screen bg-gray-50"> <Card>{{msg}}</Card> </div>
</template>
<script lang="ts"> import { ref, defineComponent } from "vue"; import Card from "./components/Card.vue"; export default defineComponent({ components: { Card, }, setup() { const msg = ref("setup script"); return { msg }; } }); </script>
复制代码

这里作了两件事，一个是导入并注册组件，一个是导出一个字符串给template使用。

启用setup script以后是这样的：

<template>
  <div class="flex items-center justify-center h-screen bg-gray-50"> <Card>{{msg}}</Card> </div>
</template>


<script lang="ts" setup> import { ref } from "vue"; import Card from "./components/Card.vue"; const msg = ref("setup script"); </script>
复制代码

这里省去了组件的注册步骤，也没有显式的导出变量的动做。

虽然是实验性功能，但仍是开箱即用，你只须要在script上配置setup便可。

导出变量&方法

在setup script里面定义的全部变量都会自动导出。很是方便

<script lang="ts" setup>
import { ref } from "vue";
const msg = ref("setup script");
const handlerClick = () => {
  console.log("on click");
};
</script>
复制代码

使用组件

全部的组件导入便可自动注册：

<script lang="ts" setup>
import Card from "./components/Card.vue";
import Button from "./components/Button.vue";
</script>
复制代码

使用props - defineProps

使用props须要用到defineProps来定义，具体用法跟以前的props写法相似：

<script lang="ts" setup>
import { defineProps } from "vue";
const props = defineProps(['title', 'content']);
</script>
复制代码

给props定义类型：

const props = defineProps({
  title: String,
  content: {
      type: Stirng,
      required: true
  }
});
复制代码

使用TS的注解的方式：

defineProps<{
  title?: string
  content: string
}>();
复制代码

使用emits - defineEmit

使用defineEmit对组件里面使用到的事件进行验证和定义：

const emit = defineEmit(['onHeaderClick'])
emit('onHeaderClick', 'params')

// 对事件进行验证
const emit = defineEmit({
    onHeaderClick: ({title}) => {
        if(!title) {
            console.warn('Invalid title')
            return false
        }
        return true
    }
})
复制代码

具体的用法跟以前的同样。

使用context - useContext

使用useContext获取上下文：

import { useContext } from 'vue'
const { slots, attrs } = useContext()
复制代码

获取到的slots attrs跟以前的setup里面的是同样的。

指令

指令跟组件同样，导入自定注册：

<script setup>
  import {color} from './v-color'
</script>

<template> <div v-color /> </template>
复制代码

导入的color自动映射为指令v-color

<script setup>
  import {color as superColor} from './v-color'
</script>

<template> <div v-super-color /> </template>
复制代码

总结

setup script代码看起来简单了不少，开发效率大大的提升。可是很遗憾它还只是一个实验性功能，提出的时间是：2020-10-28，至今还未发布。

不过好消息是：

无论怎么样，小伙伴能够在本地体验一波，会总体提高幸福感。

记住不要在生产环境使用哦。