new·The score now tells you which way it movedA brain's exam only ever grows: its own material writes questions, and so does every question a real caller asked and did not get answered. The score is a percentage over that growing set, so a brain that learned more could post a smaller number — and this week three did. One of them answered two MORE questions than the week before and showed eighteen points less. Printed as a single percentage, that reads as decline to a reader and as punishment to anyone who contributes material.all news →
mozg.beta
Sign in

Vue · all subjects

single-file components

13 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

script setup syntax and basic usage

<script setup> is compile-time syntactic sugar for using Composition API inside Single-File Components. To opt in, add the setup attribute to the <script> block. The code inside is compiled as the content of the component's setup() function, meaning code inside <script setup> executes every time an instance of the component is created (unlike normal <script> which only executes once when the component is first imported).

script setup advantages over normal script

<script setup> provides: more succinct code with less boilerplate, ability to declare props and emitted events using pure TypeScript, better runtime performance (template is compiled into a render function in the same scope without an intermediate proxy), and better IDE type-inference performance.

Top-level bindings exposed to template in script setup

Any top-level bindings in <script setup> (including variables, function declarations, and imports) are directly usable in the template without needing to expose them via the methods option.

Reactivity in script setup with refs

Reactive state needs to be explicitly created using Reactivity APIs. Refs are automatically unwrapped when referenced in templates, so you can access them directly without .value syntax in template expressions.

Components as variables in script setup

Values in the scope of <script setup> can be used directly as custom component tag names. Components are referenced as variables rather than registered under string keys. PascalCase component tags are strongly recommended for consistency and to differentiate from native custom elements.

Combining script setup with normal script block

<script setup> can be used alongside normal <script>. A normal <script> may be needed to declare options that cannot be expressed in <script setup> (like inheritAttrs or custom options from plugins, though defineOptions in 3.3+ can replace this), declare named exports, or run side effects/create objects that should only execute once. The normal <script> executes in module scope (only once) while <script setup> executes in setup() scope (for each instance).

Restrictions on combining script setup and script

Do NOT use a separate <script> section for options that can already be defined using <script setup>, such as props and emits. Variables created inside <script setup> are not added as properties to the component instance, making them inaccessible from the Options API. Mixing APIs this way is strongly discouraged.

Top-level await in script setup

Top-level await can be used inside <script setup>. The resulting code is compiled as async setup(). The awaited expression is automatically compiled to preserve the current component instance context after the await. async setup() must be used in combination with Suspense, which is currently experimental.

Import statements in script setup

Import statements in Vue follow ECMAScript module specification. You can use aliases defined in build tool configuration. Common patterns: import { ref } from 'vue', import { componentA } from './Components', import { componentB } from '@/Components', import { componentC } from '~/Components'.

Generic type parameters in script setup with generic attribute

Generic type parameters can be declared using the generic attribute on the <script setup> tag with lang="ts". Example: <script setup lang="ts" generic="T">. The value works exactly like TypeScript parameter lists, supporting multiple parameters, extends constraints, default types, and imported types: generic="T extends string | number, U extends Item".

Using @vue-generic directive for explicit type passing

Use @vue-generic directive to pass explicit types when the type cannot be inferred. Syntax: <!-- @vue-generic {import('@/api').Actor} --> placed in template comment above the component usage.

Using vue-component-type-helpers for generic component refs

In order to use a reference to a generic component in a ref, use the vue-component-type-helpers library as InstanceType won't work for generics. Syntax: ref<ComponentExposed<typeof genericComponent>>(). For components without generics, InstanceType still works.

script setup restrictions

<script setup> cannot be used with the src attribute because code inside <script setup> relies on the context of an SFC. When moved to external .js or .ts files, it may cause confusion for developers and tools. Additionally, <script setup> does not support In-DOM Root Component Template.

Give your agent this brain