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，至今还未发布。
不过好消息是：
不管怎么样，小伙伴可以在本地体验一波，会整体提升幸福感。
记住不要在生产环境使用哦。
到此这篇关于Vue3 - setup script使用的文章就介绍到这了,更多相关Vue3 - setup script使用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
VUE是通过传递一些配置给Vue对象和页面中引用插值表达式来操作DOM的,下面这篇文章主要给大家介绍了关于Vue3中操作dom的四种方式总结,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-12-12
这篇文章主要介绍了Vue中使用eslint和prettier格式化代码方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
今天小编就为大家分享一篇vue iview的菜单组件Mune 点击不高亮的解决方案，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-11-11
这篇文章主要介绍了uni-app 开发微信小程序定位,通过使用onLocationChange方法持续监听地址，根据定位精度字段判断是否使用此次定位的经纬度，需要的朋友可以参考下2022-04-04
这篇文章主要介绍了Vue中的transition封装组件的实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-08-08
使用element-ui,el-row中的el-col数据为空页面布局变乱问题
这篇文章主要介绍了使用element-ui,el-row中的el-col数据为空页面布局变乱问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-08-08
这篇文章主要介绍了在vue中如何引入外部的css文件，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
Editor.js是一个用于构建具有完全可定制化块结构的现代编辑器的开源库,它提供了一个简洁、可扩展和易于使用的接口,使开发人员能够创建拥有丰富内容和互动性的编辑器,这篇文章主要给大家介绍了关于vue3使用富文本编辑器Editor.js的简单方法,需要的朋友可以参考下2024-04-04
这篇文章主要介绍了Vue中的echarts图表如何实现loading效果，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
这篇文章主要介绍了Vue项目设置可以局域网访问，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
最新评论