Skip to content

docs(glossary): update "hoisting" and "cache static" (#254) #255

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Apr 5, 2025
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .vitepress/config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -722,6 +722,11 @@ export default defineConfigWithTheme<ThemeConfig>({
text: '繁體中文',
repo: 'https://github.com/vuejs-translations/docs-zh-hk'
},
{
link: 'https://pl.vuejs.org',
text: 'Polski',
repo: 'https://github.com/vuejs-translations/docs-pl',
},
{
link: '/translations/',
text: 'ساعدنا في الترجمة',
Expand Down
10 changes: 8 additions & 2 deletions src/glossary/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -153,10 +153,16 @@ The term *hoisting* is used to describe running a section of code before it is r

JavaScript uses hoisting for some constructs, such as `var`, `import` and function declarations.

In a Vue context, the template compiler applies *static hoisting* to improve performance. When converting a template to a render function, VNodes that correspond to static content can be created once and then reused. These static VNodes are described as hoisted because they are created outside the render function, before it runs. A similar form of hoisting is applied to static objects or arrays that are generated by the template compiler.
In a Vue context, the compiler applies *hoisting* to improve performance. When compiling a component, static values are moved out of the component's scope. These static values are described as 'hoisted' because they are created outside the component.

## cache static {#cache-static}

The term *cache* is used to describe the temporary storage of frequently accessed data to improve performance.

The Vue template compiler identifies those static VNodes, caches them during the initial render, and reuses the same VNodes for every subsequent re-render.

For more details see:
- [Guide - Rendering Mechanism - Static Hoisting](/guide/extras/rendering-mechanism.html#static-hoisting)
- [Guide - Rendering Mechanism - Cache Static](/guide/extras/rendering-mechanism.html#cache-static)

## in-DOM template {#in-dom-template}

Expand Down
18 changes: 10 additions & 8 deletions src/guide/extras/web-components.md
Original file line number Diff line number Diff line change
Expand Up @@ -306,9 +306,10 @@ declare module 'vue' {

Here is the recommended way to enable type checking in SFC templates of Custom Elements that are not built with Vue.

> [!Note]
> This approach is one possible way to do it, but it may vary depending on the
> framework being used to create the custom elements.
:::tip Note
- This approach is one possible way to do it, but it may vary depending on the
- framework being used to create the custom elements.
:::

Suppose we have a custom element with some JS properties and events defined, and it is shipped in a library called `some-lib`:

Expand Down Expand Up @@ -389,11 +390,12 @@ type VueEmit<T extends EventMap> = EmitFn<{
}>
```

> [!Note]
> We marked `$props` and `$emit` as deprecated so that when we get a `ref` to
> a custom element we will not be tempted to use these properties, as these
> properties are for type checking purposes only when it comes to custom elements.
> These properties do not actually exist on the custom element instances.
:::tip Note
- We marked `$props` and `$emit` as deprecated so that when we get a `ref` to
- a custom element we will not be tempted to use these properties, as these
- properties are for type checking purposes only when it comes to custom elements.
- These properties do not actually exist on the custom element instances.
:::

Using the type helper we can now select the JS properties that should be exposed for type checking in Vue templates:

Expand Down
2 changes: 1 addition & 1 deletion src/translations/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -19,13 +19,13 @@ aside: false
- [Русский / Russian](https://ru.vuejs.org/) [[source](https://github.com/vuejs-translations/docs-ru)]
- [Čeština / Czech](https://cs.vuejs.org/) [[source](https://github.com/vuejs-translations/docs-cs)]
- [繁體中文 / Traditional Chinese](https://zh-hk.vuejs.org/) [[source](https://github.com/vuejs-translations/docs-zh-hk)]
- [Polski / Polish](https://pl.vuejs.org/) [[source](https://github.com/vuejs-translations/docs-pl)]

## Work in Progress Languages {#work-in-progress-languages}

- [العربية / Arabic](https://ar.vuejs.org/) [[source](https://github.com/vuejs-translations/docs-ar)]
- [Español / Spanish](https://vue3-spanish-docs.netlify.app/) [[source](https://github.com/icarusgk/vuejs-spanish-docs)]
- [Deutsch / German](https://de.vuejs.org/) [[source](https://github.com/vuejs-translations/docs-de)]
- [Polski / Polish](https://pl.vuejs.org/) [[source](https://github.com/vuejs-translations/docs-pl)]

## Starting a new Translation {#starting-a-new-translation}

Expand Down