带你熟练vue3的setup语法糖<script setup>
带你熟练vue3的setup语法糖,通俗易懂。
setup语法糖
模板中用到东西无需return
组件的自定义方法、定义的数据(响应式和非响应式)、引入的组件都可以直接在模板(template)中使用直接使用,无需return或者注册。
<script setup lang='ts'>
import Test from "./components/Test.vue"
import {ref} from "vue"
const num=ref(0)
function add(){num.value++}
</script>
<template>
<p>{{num}}</p>
<button @click="add">num++</button>
<Test/>
</template>
<style scoped>
</style>
ref解包
和从 setup()
函数中返回值一样,ref 值在模板中使用的时候会自动解包:
<script setup>
import { ref } from 'vue'
const count = ref(0)
</script>
<template>
<button @click="count++">{{ count }}</button>
</template>
使用自定义指令
全局注册的自定义指令将以符合预期的方式工作,且本地注册的指令可以直接在模板中使用。但有一个需要注意的限制:必须以 vNameOfDirective
的形式来命名本地自定义指令,以使得它们可以直接在模板中使用。
<script setup>
const vMyDirective = {
beforeMount: (el) => {
// 在元素上做些操作
}
}
</script>
<template>
<h1 v-my-directive>This is a Heading</h1>
</template>
<script setup>
// 导入的指令同样能够工作,并且能够通过重命名来使其符合命名规范
import { myDirective as vMyDirective } from './MyDirective.js'
</script>
defineProps 和 defineEmits
在 <script setup>
中必须使用 defineProps
和 defineEmits
API 来声明 props
和 emits
,它们具备完整的类型推断并且在 <script setup>
中是直接可用的:
<script setup>
const props=defineProps({
x:{
type:String,
default:'z'
},
})
const emit = defineEmits(['change', 'delete'])
console.log(props.x) //使用props
</script>
1.defineProps
和 defineEmits
都是只在 <script setup>
中才能使用。他们不需要导入且会随着 <script setup>
处理过程一同被编译掉。
2.defineProps 接收与 props 选项相同的值,defineEmits 也接收 emits 选项相同的。
defineExpose
获取setup语法糖创建的组件实例时,获取的实例是没有组件自定义的方法和属性的,此时我们需要通过defineExpose
来暴露。
<!--组件test-->
<script setup lang='ts'>
import {} from 'vue'
const a=()=>{console.log(1)}
const b=()=>{console.log(2)}
defineExpose({
a,b
})
</script>
<template>
<p>组件test</p>
</template>
<!--父组件-->
<script setup lang='ts'>
import Test from "./components/Test.vue"
import {ref,onMounted} from "vue"
const testInstanceRef=ref()
onMounted(()=>{
const testInstance=testInstanceRef.value
console.log(testInstance.$el) // p标签
console.log(testInstance.a) // a方法,如果不使用defineExpose暴露是拿不到的
})
</script>
<script>
export default{
components:{
Test,
}
}
</script>
<template>
<Test ref="testInstanceRef" />
</template>
useSlots和 useAttrs
在 <script setup>
使用 slots
和 attrs
的情况应该是很罕见的,因为可以在模板中通过 $slots
和 $attrs
来访问它们。在你的确需要使用它们的罕见场景中,可以分别用 useSlots
和 useAttrs
两个辅助函数:
<script setup>
import { useSlots, useAttrs } from 'vue'
const slots = useSlots()
const attrs = useAttrs()
</script>
useSlots
和 useAttrs
是真实的运行时函数,它会返回与 setupContext.slots
和 setupContext.attrs
等价的值,同样也能在普通的组合式 API 中使用。
与普通的 <script>
一起使用
setup script可以和普通的 script 一起使用。普通的 script 在有这些需要的情况下或许会被使用到:
- 无法在
<script setup>
声明的选项,例如inheritAttrs
或通过插件启用的自定义的选项。 - 声明命名导出。
- 运行副作用或者创建只需要执行一次的对象。
<script>
// 普通 <script>, 在模块范围下执行(只执行一次)
runSideEffectOnce()
// 声明额外的选项
export default {
inheritAttrs: false,
customOptions: {}
}
</script>
<script setup>
// 在 setup() 作用域中执行 (对每个实例皆如此)
</script>
在setup script中支持await
结果代码会被编译成async setup()
,async setup()
必须与 Suspense
组合使用,否则会抛出警告。
<!--组件test-->
<script setup lang='ts'>
const ListReq=()=>new Promise((rel)=>{setTimeout(()=>rel([1,2,3]),1000)})
const res=await ListReq()
</script>
<template>
<p>test组件:{{res}}</p>
</template>
<!--父组件-->
<script setup lang='ts'>
import {Suspense} from 'vue'
import Test from "./components/Test.vue"
</script>
<template>
<Suspense>
<template #default><Test/></template>
<template #fallback><p>loading...</p></template>
</Suspense>
</template>
setup script没有src属性
由于模块执行语义的差异,<script setup>
中的代码依赖单文件组件的上下文。当将其移动到外部的 .js
或者 .ts
文件中的时候,对于开发者和工具来说都会感到混乱。因而 <script setup>
不能使用 src
attribute 。
composition api的自动导入
需要借助三方插件unplugin-auto-import
来完成自动导入功能。什么是自动导入呢,例:当我们要使用onMounted
时,我们需要import {onMounted} from 'vue'
,但是使用该插件之后就可以省略这一步骤了。
1.安装三方库
yarn add unplugin-auto-import -D
2.在vite.config.ts
中编写如下代码
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from "unplugin-auto-import/vite"
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue(),
AutoImport({
imports: ['vue','./src/api'], // 完成vue模块中的api自动导入,也可追加vuex,vue-router。也可以追加自定义目录
dts: './auto-imports.d.ts', // 生成类型声明文件的路径
})
]
})
更多配置访问 unplugin-auto-import
3.在组件中测试自动导入功能
<script setup lang='ts'>
onMounted(()=>{console.log('onMounted')})
</script>
自定义vue3组件代码块
有了组件代码块可以大大提高我们的开发效率,一键生成我们组件的基本结构,省去了很多时间,下面是代码块生成的组件模板。
1.composition api组件的代码块
<script>
import {defineComponent,reactive,toRefs} from 'vue'
import {} from 'vue-router'
import {} from 'vuex'
export default defineComponent({
name:'',
props:{},
emits:[],
setup(props,context){
const data=reactive({}) //里面写所有的响应式数据,像vue2中的data一样
return{
...toRefs(data),
}
},
components:{},
})
</script>
<template>
</template>
<style scoped>
</style>
2.setup script组件的代码块
<script setup lang='ts'>
import {} from 'vue'
</script>
<script lang='ts'>
//解决vscode插件报错问题,除此之外组件可能存在使用普通script的情况
export default{
components:{
},
}
</script>
<template>
</template>
<style scoped>
</style>
需要在vscode中自定义代码块,具体操作参考文章在vscode中创建自己的vue3组件代码块。
更多推荐
所有评论(0)