初识 vue3 之单文件组件 script setup

Qwe7

发布于 2022-01-30 17:59:41

2K0

文章被收录于专栏：网络收集网络收集

关于此分类

关于初识 vue3 分类主要是记录一些通过 vue3 进行的实践与学习记录。

此文主要记录关于 vue3 script setup 的尝试。

本文参考于：

单文件组件 <script setup>

默认自动暴露

<script setup> 是在单文件组件 (SFC) 中使用组合式 API 的编译时语法糖。相比于普通的 <script> 语法，它具有更多优势：

更少的样板内容，更简洁的代码。
能够使用纯 Typescript 声明 props 和抛出事件。
更好的运行时性能 (其模板会被编译成与其同一作用域的渲染函数，没有任何的中间代理)。
更好的 IDE 类型推断性能 (减少语言服务器从代码中抽离类型的工作)。

HTML

<template>
  <div>当前msg的值：{{ msg }}</div>
  <div>当前msg的值(ref的值会被自动解包)：{{ msgRef }}</div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

// 1. 顶层的绑定会暴露给模板
const msg = '这是一条msg'
const msgRef = ref('msg')
</script>

同样的导入组件也可以直接使用

HTML

<template>
  <MyComponent />
</template>

<script setup>
import MyComponent from './MyComponent.vue'
</script>

动态组件

HTML

<script setup>
import Foo from './Foo.vue'
import Bar from './Bar.vue'
</script>

<template>
  <component :is="Foo" />
  <component :is="someCondition ? Foo : Bar" />
</template>

自定义指令

但这里有一个需要注意的限制：必须以 vNameOfDirective 的形式来命名本地自定义指令，以使得它们可以直接在模板中使用。

TYPESCRIPT

const vMyDirective = {
  beforeMount: (el: HTMLElement) => {
    console.log(el)
  },
  mounted(el, value: Ref<number>) {
    // value 即传入的参数值
    console.log(value.value)
  }
}

HTML

<div v-my-directive="123">123</div>

defineProps、defineEmits、defineExpose

defineProps 和 defineEmits 分别用于定义当前组件需要接收的参数和需要触发的 emit。

JAVASCRIPT

const props = defineProps({
  foo: String
})

const emit = defineEmits(['change', 'delete'])

在 JavaScript 中上述定义即可，但在 typescript 中可以为其增加类型。

TYPESCRIPT

const props = defineProps<{
  foo: string
  bar?: number
}>()

const emit = defineEmits<{
  (e: 'change', id: number): void
  (e: 'update', value: string): void
}>()

类型声明时的默认值

TYPESCRIPT

const props = defineProps<{
  foo: string
  bar?: number
}>()

const emit = defineEmits<{
  (e: 'change', id: number): void
  (e: 'update', value: string): void
}>()

defineExpose 用于定义暴露出去的属性，此模式下默认是全暴露

VUE

<script setup>
import { ref } from 'vue'

const a = 1
const b = ref(2)

defineExpose({
  a,
  b
})
</script>

使用 <script setup> 的组件是默认关闭的，也即通过模板 ref 或者 $parent 链获取到的组件的公开实例，不会暴露任何在 <script setup> 中声明的绑定。

为了在 <script setup> 组件中明确要暴露出去的属性，使用 defineExpose 编译器宏

VUE

<template>
  <div>test</div>
</template>

<script setup>
const a = 1
defineExpose({
  a: 1
})
</script>

在父组件中使用

VUE

<template>
  <testAVue ref="testRef" />
</template>

<script setup lang="ts">
import testAVue from './test-a.vue'
import { onMounted, ref } from 'vue'
const testRef = ref(null)
onMounted(() => {
  console.log(testRef.value) // Proxy {a: 1, __v_skip: true}
})
</script>

与普通的 `<script>` 使用

<script setup> 可以和普通的 <script> 一起使用。普通的 <script> 在有这些需要的情况下或许会被使用到：

无法在 <script setup> 声明的选项，例如 inheritAttrs 或通过插件启用的自定义的选项。
声明命名导出。
运行副作用或者创建只需要执行一次的对象。

VUE

<script>
    // 普通 <script>, 在模块范围下执行(只执行一次)
    runSideEffectOnce()

    // 声明额外的选项
    export default {
        inheritAttrs: false,
        customOptions: {}
    }
</script>

<script setup>
    // 在 setup() 作用域中执行 (对每个实例皆如此)
</script>

本文系转载，前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

javascript