Vue.js (original) (raw)

Glossary ​

This glossary is intended to provide some guidance about the meanings of technical terms that are in common usage when talking about Vue. It is intended to be descriptive of how terms are commonly used, not a prescriptive specification of how they must be used. Some terms may have slightly different meanings or nuances depending on the surrounding context.

async component ​

An async component is a wrapper around another component that allows for the wrapped component to be lazy loaded. This is typically used as a way to reduce the size of the built .js files, allowing them to be split into smaller chunks that are loaded only when required.

Vue Router has a similar feature for the lazy loading of route components, though this does not use Vue's async components feature.

For more details see:

compiler macro ​

A compiler macro is special code that is processed by a compiler and converted into something else. They are effectively a clever form of string replacement.

Vue's SFC compiler supports various macros, such as defineProps(), defineEmits() and defineExpose(). These macros are intentionally designed to look like normal JavaScript functions so that they can leverage the same parser and type inference tooling around JavaScript / TypeScript. However, they are not actual functions that are run in the browser. These are special strings that the compiler detects and replaces with the real JavaScript code that will actually be run.

Macros have limitations on their use that don't apply to normal JavaScript code. For example, you might think that const dp = defineProps would allow you to create an alias for defineProps, but it'll actually result in an error. There are also limitations on what values can be passed to defineProps(), as the 'arguments' have to be processed by the compiler and not at runtime.

For more details see: