Vue3 - setup script超爽体验,你值得一试__Vue.js
发布于 13 天前 作者 banyungong 246 次浏览 来自 分享
粉丝福利 : 关注VUE中文社区公众号,回复视频领取粉丝福利

前言

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,至今还未发布。

不过好消息是:

image.png

不管怎么样,小伙伴可以在本地体验一波,会整体提升幸福感。

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

image.png

版权声明:著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。 作者: Kaiser 原文链接:https://juejin.im/post/6955395084518948900

回到顶部