About this category

about First acquaintance vue3 Classification is mainly to record some practice and learning records through vue3.

This article mainly records the attempt of vue3 script setup.

This article refers to:

• Single file component < script setup >

Default auto exposure

< script setup > is a compile time syntax for using composite API s in single file components (SFC). Compared with ordinary < script > syntax, it has more advantages:

• Less template content, more concise code.
• Can declare props and throw events using pure Typescript.
• Better runtime performance (its template will be compiled into rendering functions with the same scope without any intermediate agents).
• Better IDE type inference performance (reducing the work of the language server to extract types from the code).

HTML

<template>
  <div>current msg Value of:{{ msg }}</div>
  <div>current msg Value of(ref The value of will be unpacked automatically): {{ msgRef }}</div>
</template>

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

// 1. The top-level binding will be exposed to the template
const msg = 'This is a msg'
const msgRef = ref('msg')
</script>

The same import component can also be used directly

HTML

<template>
  <MyComponent />
</template>

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

Dynamic component

HTML

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

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

Custom instruction

However, there is a limitation to note here: local custom directives must be named in the form of vNameOfDirective so that they can be used directly in the template.

TYPESCRIPT

const vMyDirective = {
  beforeMount: (el: HTMLElement) => {
    console.log(el)
  },
  mounted(el, value: Ref<number>) {
    // Value is the parameter value passed in
    console.log(value.value)
  }
}

HTML

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

defineProps,defineEmits,defineExpose

defineProps and defineEmits are respectively used to define the parameters to be received by the current component and the emit to be triggered.

JAVASCRIPT

const props = defineProps({
  foo: String
})

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

You can define the above in JavaScript, but you can add types to typescript.

TYPESCRIPT

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

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

Default value at type declaration

TYPESCRIPT

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

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

defineExpose is used to define the exposed attributes. In this mode, the default is full exposure

VUE

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

const a = 1
const b = ref(2)

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

Components using < script setup > are closed by default, that is, the public instance of the component obtained through the template ref or $parent chain will not expose any binding declared in < script setup >.

To specify the attributes to be exposed in the < script setup > component, use the defineExpose compiler macro

VUE

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

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

Use in parent component

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>

Use with normal < script >

< script setup > can be used with normal < script >. Ordinary < script > may be used when there are these needs:

• Options that cannot be declared in < script setup >, such as inheritAttrs or custom options enabled through the plug-in.
• Declare named exports.
• Run side effects or create objects that need to be executed only once.

VUE

<script>
    // Normal < script >, executed within the scope of the module (only once)
    runSideEffectOnce()

    // Declare additional options
    export default {
        inheritAttrs: false,
        customOptions: {}
    }
</script>

<script setup>
    // Execute in the scope of setup() (for each instance)
</script>