【Vue3】都2022年了！你还没有感受过 Setup 语法糖的魅力吗？！🔥

2022-12-07 127

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 前言今天接着聊一下项目中用到的技术栈 Vue3 Script Setup

前言

今天接着聊一下项目中用到的技术栈 Vue3 Script Setup

Vue3 Script Setup

众所周知，Vue3中我们需要通过setup()函数进行return，setup语法糖解决了这个冗余的问题，在我司的这个项目中也是用到了 setup语法糖 + Ts，说实在的，咱就是说整个一个被香到了，感谢那些参与Vue3文档翻译工作的同学们，栓Q。

特性与用法

食用方法

通过在script标签上添加setup使用语法糖，举个🌰

<script setup lang="ts"></script>
复制代码

这就就不需要再使用setup函数进行return操作了，是不是很简单。

Props

defineProps

Props通过defineProps进行接受，这个函数是内置的，引入直接使用，举个🌰

// 养成好习惯，给每一个Props创建interface
interface Props {
    name: string
}
const props = defineProps<Props>()
复制代码

withDefaults

通过withDefaults给Props设置默认值，还是使用上面的那个栗子🌰

const props = withDefaults(defineProps<Props>(), {
    name: 'HoMeTown'
})
复制代码

Auto component

在setup语法糖中，不需要自己注册自定义componet，引入的组件可以直接使用，🌰

<template>
    <show-name :name="HOMETOWN" />
</template>
<script setup lang="ts">
import ShowName from './show-name/index.vue'
</script>
复制代码

Emits

defineEmits

通过defineEmits可以获取当前组件拥有的事件，举个🌰

const emits = defineEmits(['onChangeName'])
onChangeName('xxx')
复制代码

自定义事件标识

我们可以通过:xxx解释一个事件，这样就可以防止我们在自定义v-model时，占用默认的value，举个🌰

<upload-file v-model:pdf="pdfUrl" />
<upload-file v-model:docs="docsUrl" />
复制代码

const emits = defineEmits(['update:pdf', 'update:docs'])
// 修改pdf文件
emits('update:pdf', pdfFile)
// 修改docs文件
emits('update:docs', docsFile)
复制代码

Expose

通过defineExpose将子组件的方法或属性暴露给父组件，举个🌰

Son.vue

...
function getSomething() {
    ...
}
defineExpose({
    getSomeThing // 对父组件抛出方法
})
...
复制代码

Parent.vue

<son ref="son" />
复制代码

const sonDom = ref() // 获取子组件ref
sonDom.value.getSomething() // 成功调用Son组件的getSomething方法
复制代码

Computed

<script setup lang="ts">
import { computed } from 'vue'
const doubleNum = computed(() => num *= 2) // 注意，这里的doubleNum是一个proxy，需要通过doubleNum.value获取原值
</script>
复制代码

Watch

普通监听

<script setup lang="ts">
import { watch } from 'vue'
watch(doubleNum, val => {
    console.log(val, 'watcher')
})
</script>
复制代码

深层监听

<script setup lang="ts">
import { watch } from 'vue'
watch(() => modelFrom.doubleNum, val => {
    console.log(val, 'deep watcher')
}, { deep: true })
</script>
复制代码

Slots && Attrs

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

完结~