From b0efe5a918fa2a54666030effbbc2f9c55ba2b3f Mon Sep 17 00:00:00 2001
From: skirtle <65301168+skirtles-code@users.noreply.github.com>
Date: Wed, 1 Feb 2023 18:49:41 +0000
Subject: [PATCH 01/10] Initial draft of a glossary page

---
 src/glossary/index.md | 318 ++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 318 insertions(+)
 create mode 100644 src/glossary/index.md

diff --git a/src/glossary/index.md b/src/glossary/index.md
new file mode 100644
index 0000000000..71fb6b4f89
--- /dev/null
+++ b/src/glossary/index.md
@@ -0,0 +1,318 @@
+# Glossary
+
+This glossary is intended to provide some rough 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.
+
+[[TOC]]
+
+## compiler macro
+
+A *compiler macro* is special code that is processed by a compiler and converted into something else. They are effectively just a clever form of string replacement.
+
+Vue's [SFC](#single-file-component) compiler supports various macros, such as `defineProps()`, `defineEmits()` and `defineExpose()`. These macros are intentionally designed to look like normal JavaScript functions, but they aren't functions at all. These are special strings that the compiler detects and replaces with the real JavaScript code that will run in the browser.
+
+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.
+
+These macros are conceptually similar to dynamic imports using `import()`. While `import()` looks a lot like a function call, it's actually special syntax that gets processed by the bundler as part of the build. Like with `defineProps()`, we can't create an alias using `const myImport = import`. There are also restrictions on exactly what syntax can be used to pass values to the 'function', so that the compiler can understand the values.
+
+## composable
+
+The term *composable* describes a common usage pattern in Vue. It isn't a separate feature of Vue, it's just a way of using the framework's Composition API. As with many patterns, there can be some disagreement about whether specific code qualifies for the label.
+
+* A composable is a function.
+* The function name usually begins with `use` so that other developers know it's a composable.
+* The function is typically expected to be called from inside a component's `setup()` function (or within a `<script setup>` block). This ties the invocation of the composable to the current component context, e.g. via calls to `provide()`, `inject` or `onMounted()`. Occasionally a composable may be designed to be called from elsewhere, such as a lifecycle hook.
+* Composables typically return a plain object, not a reactive object. This object is usually expected to be destructured within the calling code.
+
+<!-- TODO: Say more -->
+
+See [Guide - Composables](/guide/reusability/composables.html) for more details about writing composables.
+
+## Composition API
+
+The *Composition API* is a collection of functions used to write components and composables in Vue. It includes the [Reactivity API](#reactivity-api), as well as various other functions, such as `provide()` and `inject()` and lifecycle hooks such as `onMounted()`.
+
+In the context of authoring components, a component would typically be described as a 'Composition API component' if it uses `<script setup>` or has an explicit `setup()` function.
+
+For example, it would be common to describe either one of these examples as Composition API components:
+
+```vue
+<script setup>
+// ...
+</script>
+```
+
+```vue
+<script>
+export default {
+  setup() {
+    // ...
+  }
+}
+</script>
+```
+
+In some cases it may be necessary to use functions from the Composition API within the Options API, for example:
+
+```js
+import { computed } from 'vue'
+
+export default {
+  data() {
+    return {
+      message: 'hello!'
+    }
+  },
+  provide() {
+    return {
+      // explicitly provide a computed property
+      message: computed(() => this.message)
+    }
+  }
+}
+```
+
+Even though `computed()` is part of the Composition API, the component above would usually be described as being an Options API component, not a Composition API component.
+
+## effect
+
+See [reactive effect](#reactive-effect) and [side effect](#side-effect).
+
+## fragment
+
+The term *fragment* refers to a VNode that is used as a parent for other VNodes, but which doesn't render any elements itself.
+
+The name comes from the similar concept of a [`DocumentFragment`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentFragment) in the standard DOM.
+
+Fragments are used to support components with multiple root nodes. While such components might appear to have multiple roots, behind the scenes they actually use a fragment node as a single root, as a parent of the 'root' nodes.
+
+Fragments are also used by the template compiler as a way to wrap multiple dynamic nodes, e.g. those created via `v-for` or `v-if`. This allows for extra hints to be passed to the VDOM patching algorithm. Much of this is handled internally, but one place you'll encounter this directly is using a `key` on a `<template>` tag with `v-for`. In that scenario, the `key` is added as a prop to the fragment VNode.
+
+Fragment nodes are currently rendered to the DOM as empty text nodes, though that is an implementation detail. You may encounter that node if you use `$el` or attempt to walk the DOM with built-in browser APIs.
+
+## functional component
+
+A component definition is usually an object containing options. Even if you're using `<script setup>`, the component exported from the `.vue` file will be an object.
+
+A *functional component* is an alternative form of component that is declared using a function instead. That function acts as the render function for the component.
+
+A functional component cannot have any state of its own. It also doesn't go through the usual component lifecycle, so lifecycle hooks can't be used. This makes them slightly lighter than normal, stateful components.
+
+For more details see:
+- [Guide - Render Functions & JSX - Functional Components](/guide/extras/render-function.html#functional-components)
+
+## in-DOM template
+
+There are various ways to specify a template for a component. In most cases the template is provided as a string.
+
+The term *in-DOM template* refers to the scenario where the template is provided in the form of DOM nodes, instead of a string. Vue then converts the DOM nodes into a template string using `innerHTML`.
+
+Typically, an in-DOM template starts off as HTML markup written directly in the HTML of the page. The browser then parses this into DOM nodes, which Vue then uses to read off the `innerHTML`.
+
+For more details see:
+- [Guide - Creating an Application - In-DOM Root Component Template](/guide/essentials/application.html#in-dom-root-component-template)
+- [Guide - Component Basics - DOM Template Parsing Caveats](/guide/essentials/component-basics.html#dom-template-parsing-caveats)
+- [Options: Rendering - template](/api/options-rendering.html#template)
+
+## macro
+
+See [compiler macro](#compiler-macro).
+
+## named slot
+
+A component can have multiple slots, differentiated by name. Slots other than the default slot are referred to as *named slots*.
+
+For more details see:
+- [Guide - Slots - Named Slots](/guide/components/slots.html#named-slots)
+
+## Options API
+
+Vue components are defined using objects. The properties of these component objects are known as *options*.
+
+Components can be written in two styles. One style uses the Composition API in conjunction with `setup` (either via a `setup()` option or `<script setup>`). The other style makes very little use of the Composition API, instead using various component options to achieve a similar result. The component options that are used in this way are referred to as the *Options API*.
+
+The Options API includes options such as `data()`, `computed`, `methods` and `created`.
+
+Some options, such as `props`, `emits` and `inheritAttrs`, can be used with either API. As they are component options, they can be considered part of the Options API. However, as these options are also used in conjunction with `setup()`, it is usually more useful to think of them as shared between the two component styles.
+
+The `setup()` function itself is a component option, so it *could* be described as part of the Options API. However, this is not how the term 'Options API' is normally used. Instead, the `setup()` function is considered to be part of Composition API.
+
+## prop
+
+There are three common uses of the term *prop*:
+
+* Component props
+* VNode props
+* Slot props
+
+*Component props* are what most people think of as props. These are explicitly defined by a component using either `defineProps()` or the `props` option.
+
+*VNode props* refers to the properties of the object passed as the second argument to `h()`. These can include component props, but they can also include component events, DOM events, DOM attributes and DOM properties. You'd usually only encounter VNode props if you're working with render functions to manipulate VNodes directly.
+
+*Slot props* are the properties passed to a scoped slot.
+
+In all cases, props are properties that are passed in from elsewhere.
+
+While the word props is derived from the word *properties*, the term props has a much more specific meaning in the context of Vue. You should avoid using it as an abbreviation of properties.
+
+## provide/inject
+
+`provide` and `inject` are a form of inter-component communication.
+
+When a component *provides* a value, all descendants of that component can then choose to grab that value, using `inject`. Unlike with props, the providing component doesn't know precisely which component is receiving the value.
+
+`provide` and `inject` are sometimes used to avoid *prop drilling*. They can also be used as an implicit way for a component to communicate with its slot contents.
+
+`provide` can also be used as the application level, making a value available to all components within that application.
+
+For more details see:
+- [Guide - provide / inject](/guide/components/provide-inject.html)
+
+## reactive effect
+
+A *reactive effect* is part of Vue's reactivity system. It refers to the process of tracking the dependencies of a function and re-running that function when those dependencies change.
+
+`watchEffect()` is the most direct way to create an effect. Various other parts of Vue use effects internally. e.g. component rendering updates, `computed()` and `watch()`.
+
+Vue can only track reactive dependencies within a reactive effect. If a property's value is read outside a reactive effect it'll 'lose' reactivity, in the sense that Vue won't know what to do if that property subsequently changes.
+
+The term is derived from 'side effect'. Calling the effect function is a side effect of the property value being changed.
+
+For more details see:
+- [Guide - Reactivity in Depth](https://vuejs.org/guide/extras/reactivity-in-depth.html)
+
+## reactivity
+
+In general, *reactivity* refers to the ability to automatically perform actions in response to data changes. For example, updating the DOM or making a network request when a data value changes.
+
+In a Vue context, reactivity is used to describe a collection of features. Those features combine to form a *reactivity system*, which is exposed via the [Reactivity API](#reactivity-api).
+
+There are various different ways that reactivity can be implemented. For example, it can be done by static analysis of code to determine its dependencies. However, Vue doesn't employ that form of reactivity system.
+
+Instead, Vue's reactivity system tracks property access at runtime. It does this using both Proxy wrappers and getter/setter functions for properties.
+
+For more details see:
+- [Guide - Reactivity Fundamentals](/guide/essentials/reactivity-fundamentals.html)
+- [Guide - Reactivity in Depth](/guide/extras/reactivity-in-depth.html)
+
+## Reactivity API
+
+The *Reactivity API* refers to the core Vue functions related to reactivity. These can be used independently of components. It includes functions such as `ref()`, `reactive()`, `computed()`, `watch()` and `watchEffect()`.
+
+The Reactivity API is a subset of the Composition API.
+
+For more details see:
+- [Reactivity API: Core](/api/reactivity-core.html)
+- [Reactivity API: Utilities](/api/reactivity-utilities.html)
+- [Reactivity API: Advanced](/api/reactivity-advanced.html)
+
+## ref
+
+For the `ref` attribute used in templates, see [template ref](#template-ref) instead.
+
+A `ref` is part of Vue's reactivity system. It is an object with a single reactive property, called `value`.
+
+Vue provides 4 functions to create refs directly: `ref()`, `shallowRef()`, `computed()` and `customRef()`.
+
+For more details see:
+- [Guide - Reactivity Fundamentals](/guide/essentials/reactivity-fundamentals.html)
+- [Reactivity API: Core](/api/reactivity-core.html)
+- [Reactivity API: Utilities](/api/reactivity-utilities.html)
+- [Reactivity API: Advanced](/api/reactivity-advanced.html)
+
+## render function
+
+A *render function* is the part of a component that generates the VNodes used during rendering. Templates are compiled down into render functions.
+
+For more details see:
+- [Guide - Render Functions & JSX - Functional Components](/guide/extras/render-function.html#functional-components)
+
+## scheduler
+
+The *scheduler* is the part of Vue's internals that controls the timing of when reactive effects are run. 
+
+When reactive state changes, Vue doesn't immediately trigger rendering updates. Instead, it batches them together using a queue. This ensures that a component only re-renders once, even if multiple changes need making to the underlying data.
+
+There are two other queues inside the scheduler. The `flush: 'pre'` queue is processed prior to the rendering queue. The `flush: 'post'` queue runs after the rendering queue. These two queues are used by watchers, with `flush: 'pre'` being the default.
+
+Jobs in the scheduler queues are also used to perform various other internal tasks, such as triggering lifecycle hooks or updating template refs.
+
+## scoped slot
+
+The term *scoped slot* is used to refer to slots that receive props.
+
+Historically, Vue made a much clearer distinction between scoped and non-scoped slots. To some extent they could be regarded as two separate features, with template syntax hiding the distinction in the most common cases.
+
+In Vue 3, the slot APIs were simplified to make all slots behave like scoped slots. However, the use cases for scoped and non-scoped slots often differ, so the term still proves useful when referring to slots with props.
+
+The props passed to a slot can only be used within a specific region of the parent template, responsible for defining the slot's contents. This region of the template behaves as a variable scope for the props, hence 'scoped slot'.
+
+For more details see:
+- [Guide - Slots - Scoped Slots](/guide/components/slots.html#scoped-slots)
+
+## SFC
+
+See [Single-File Component](#single-file-component).
+
+## side effect
+
+The term *side effect* is not specific to Vue. It is used to describe operations or functions that do something beyond their local scope.
+
+For example, in the context of setting a property like `user.name = null`, it is expected that this will change the value of `user.name`. If it also does something else, like triggering Vue's reactivity system, then this would be described as a side effect. This is the origin of the term [reactive effect](#reactive-effect) within Vue.
+
+When a function is described as having side effects, it means that the function performs some sort of action that is observable outside the function, aside from just returning a value. This might mean that it updates a value in state, or trigger a network request.
+
+The term is often used when describing rendering or computed properties. It is considered best practice for rendering to have no side effects. Likewise, the getter function for a computed property should have no side effects.
+
+## Single-File Component
+
+The term *Single-File Component*, or SFC, refers to the `.vue` file format that is commonly used for Vue components.
+
+See also:
+- [Guide - Single-File Components](/guide/scaling-up/sfc.html)
+- [SFC Syntax Specification](/api/sfc-spec.html)
+
+## slot
+
+Slots are used to pass content to child components. Whereas props are used to pass data values, slots are used to pass richer content consisting of HTML elements and other Vue components.
+
+For more details see:
+- [Guide - Slots](/guide/components/slots.html)
+
+## template ref
+
+The term *template ref* refers to using a `ref` attribute on a tag within a template. After a component renders, this attribute is used to populate a corresponding property with either the HTML element or the component instance that corresponds to the tag in the template.
+
+Template refs should not be confused with the refs found in Vue's reactivity system.
+
+If you are using the Options API then the refs are exposed via property of the `$refs` object.
+
+With the Composition API, template refs populate a reactive ref with the same name.
+
+For more details see:
+- [Guide - Template Refs](/guide/essentials/template-refs.html)
+
+## VDOM
+
+See [virtual DOM](#virtual-dom).
+
+## virtual DOM
+
+The term *virtual DOM* is not unique to Vue. It is a common approach used by several UI frameworks for managing updates to the UI.
+
+Browsers use a tree of nodes to represent the current state of the page. That tree, and the JavaScript APIs used to interact with it, are referred to as the *document object model*, or DOM.
+
+Manipulating the DOM is a major performance bottleneck. The virtual DOM provides one strategy for managing that.
+
+Rather than creating DOM nodes directly, Vue components generate a description of what DOM nodes they would like. These descriptors are plain JavaScript objects, known as VNodes (virtual DOM nodes). Creating VNodes is relatively cheap.
+
+Every time a component re-renders, the new tree of VNodes is compared to the previous tree of VNodes and any difference are then applied to the real DOM. If nothing has changed then the DOM doesn't need to be touched.
+
+For more details see:
+- [Guide - Rendering Mechanism](/guide/extras/rendering-mechanism.html)
+- [Guide - Render Functions & JSX - Functional Components](/guide/extras/render-function.html#functional-components)
+
+## VNode
+
+A *VNode* is a *virtual DOM node*. They can be created using the [`h()`](/api/render-function.html#h) function.
+
+See [virtual DOM](#virtual-dom) for more information.

From ed1e067028843a2b609e8f3f6a41479bfd0db0c9 Mon Sep 17 00:00:00 2001
From: skirtle <65301168+skirtles-code@users.noreply.github.com>
Date: Fri, 3 Feb 2023 23:28:07 +0000
Subject: [PATCH 02/10] Add more definitions to the glossary

---
 src/glossary/index.md | 100 +++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 99 insertions(+), 1 deletion(-)

diff --git a/src/glossary/index.md b/src/glossary/index.md
index 71fb6b4f89..5af0dc1051 100644
--- a/src/glossary/index.md
+++ b/src/glossary/index.md
@@ -4,6 +4,15 @@ This glossary is intended to provide some rough guidance about the meanings of t
 
 [[TOC]]
 
+## 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](https://router.vuejs.org/guide/advanced/lazy-loading.html), though this does not use Vue's async component feature.
+
+For more details see:
+- [Async Components](/guide/components/async.html)
+
 ## compiler macro
 
 A *compiler macro* is special code that is processed by a compiler and converted into something else. They are effectively just a clever form of string replacement.
@@ -14,6 +23,35 @@ Macros have limitations on their use that don't apply to normal JavaScript code.
 
 These macros are conceptually similar to dynamic imports using `import()`. While `import()` looks a lot like a function call, it's actually special syntax that gets processed by the bundler as part of the build. Like with `defineProps()`, we can't create an alias using `const myImport = import`. There are also restrictions on exactly what syntax can be used to pass values to the 'function', so that the compiler can understand the values.
 
+## component
+
+The term *component* is not unique to Vue. It is common to many UI frameworks. It describes a chunk of the UI, such as a button or checkbox. Components can also be combined to form larger components.
+
+Components are the primary mechanism provided by Vue to split a UI into smaller pieces, both to improve maintainability and to allow for code reuse.
+
+A component is an object. All properties are optional, but either a template or render function is required for the component to render. For example, the following object would be a valid component:
+
+```js
+const HelloWorldComponent = {
+  render() {
+    return 'Hello world!'
+  }
+}
+```
+
+In practice, most Vue applications are written using [Single-File Components](#single-file-component) (`.vue` files). While these components may not appear to be objects at first glance, they are ultimately compiled into an object, which becomes the default export for the file. From an external perspective, a `.vue` file is just an ES module that exports a component object.
+
+The properties of a component object are usually referred to as *options*. This is where the [Options API](#options-api) gets its name.
+
+The options for a component define how instances of that component should be created. Components are conceptually similar to classes, though Vue doesn't use actual JavaScript classes to define them.
+
+The term component can also be used more loosely to refer to component instances.
+
+A [functional component](#functional-component) is a special type of component that is defined using a function rather than an object.
+
+For more details see:
+- [Guide - Component Basics](/guide/essentials/component-basics.html)
+
 ## composable
 
 The term *composable* describes a common usage pattern in Vue. It isn't a separate feature of Vue, it's just a way of using the framework's Composition API. As with many patterns, there can be some disagreement about whether specific code qualifies for the label.
@@ -73,10 +111,46 @@ export default {
 
 Even though `computed()` is part of the Composition API, the component above would usually be described as being an Options API component, not a Composition API component.
 
+## custom element
+
+The term *custom element* is not unique to Vue. It is part of the Web Components standard, which is implemented in modern web browsers. It refers to the ability to use a custom HTML element in your HTML markup to include a Web Component at that point in the page.
+
+Vue's HTML-like template syntax also allows for custom elements to be used to integrate Web Components within a Vue application. These should not be confused with Vue's own component system, nor the ability to include Vue components as tags within a template.
+
+For more details see:
+- [Guide - Vue and Web Components](/guide/extras/web-components.html)
+
+## directive
+
+The term *directive* refers to template attributes beginning with the `v-` prefix, or their equivalent shorthands.
+
+Built-in directives include `v-if`, `v-for`, `v-bind`, `v-on` and `v-slot`.
+
+Vue also supports creating custom directives, though they are typically only used as an 'escape hatch' for manipulating DOM nodes directly. Custom directives generally can't be used to recreate the functionality of the built-in directives.
+
+For more details see:
+- [Guide - Template Syntax - Directives](/guide/essentials/template-syntax.html#directives)
+- [Guide - Custom Directives](/guide/reusability/custom-directives.html)
+
+## dynamic component
+
+A *dynamic component* is not a specific type of component. Instead, the term refers to cases where the choice of which child component to render needs to be made dynamically. Typically, this is achieved using `<component :is="type">`.
+
+For more details see:
+- [Guide - Components Basics - Dynamic Components](/guide/essentials/component-basics.html#dynamic-components)
+
 ## effect
 
 See [reactive effect](#reactive-effect) and [side effect](#side-effect).
 
+## event
+
+The idea of an *event* is common in many different areas of programming. Within Vue the term is commonly applied to both native HTML element events and custom component events. The `v-on` directive is used in templates to listen for both types of event. 
+
+For more details see:
+- [Guide - Event Handling](/guide/essentials/event-handling.html)
+- [Guide - Component Events](/guide/components/events.html)
+
 ## fragment
 
 The term *fragment* refers to a VNode that is used as a parent for other VNodes, but which doesn't render any elements itself.
@@ -113,6 +187,21 @@ For more details see:
 - [Guide - Component Basics - DOM Template Parsing Caveats](/guide/essentials/component-basics.html#dom-template-parsing-caveats)
 - [Options: Rendering - template](/api/options-rendering.html#template)
 
+## inject
+
+See [provide / inject](#provide-inject).
+
+## lifecycle hooks
+
+A specific instance of a Vue component goes through a lifecycle. For example, it is created, mounted, updated, and unmounted.
+
+The *lifecycle hooks* are a way to listen for these lifecycle events.
+
+With the Options API, each hook is provided as a separate option, e.g. `mounted`. The Composition API uses functions instead, such as `onMounted()`.
+
+For more details see:
+- [Guide - Lifecycle Hooks](/guide/essentials/lifecycle.html)
+
 ## macro
 
 See [compiler macro](#compiler-macro).
@@ -136,6 +225,15 @@ Some options, such as `props`, `emits` and `inheritAttrs`, can be used with eith
 
 The `setup()` function itself is a component option, so it *could* be described as part of the Options API. However, this is not how the term 'Options API' is normally used. Instead, the `setup()` function is considered to be part of Composition API.
 
+## plugin
+
+While the term *plugin* can be used in a wide variety of contexts, Vue has a specific concept of a plugin as a way to add functionality to an application.
+
+Plugins are added to an application by calling `app.use(plugin)`. The plugin itself is either a function or an object with an `install` function. That function will be passed the application instance and can then do whatever it needs to do. 
+
+For more details see:
+- [Guide - Plugins](/guide/reusability/plugins.html)
+
 ## prop
 
 There are three common uses of the term *prop*:
@@ -154,7 +252,7 @@ In all cases, props are properties that are passed in from elsewhere.
 
 While the word props is derived from the word *properties*, the term props has a much more specific meaning in the context of Vue. You should avoid using it as an abbreviation of properties.
 
-## provide/inject
+## provide / inject
 
 `provide` and `inject` are a form of inter-component communication.
 

From 7cdb30247a1f9d558288bc277211528680b51984 Mon Sep 17 00:00:00 2001
From: skirtle <65301168+skirtles-code@users.noreply.github.com>
Date: Fri, 3 Feb 2023 23:28:41 +0000
Subject: [PATCH 03/10] Add the glossary to the main navigation

---
 .vitepress/config.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/.vitepress/config.ts b/.vitepress/config.ts
index ee62331614..db9abb949a 100644
--- a/.vitepress/config.ts
+++ b/.vitepress/config.ts
@@ -15,6 +15,7 @@ const nav: ThemeConfig['nav'] = [
       { text: 'Examples', link: '/examples/' },
       { text: 'Quick Start', link: '/guide/quick-start' },
       // { text: 'Style Guide', link: '/style-guide/' },
+      { text: 'Glossary', link: '/glossary/' },
       {
         text: 'Vue 2 Docs',
         link: 'https://v2.vuejs.org'

From 661db939c609488a50e407f1ef7f84d973b027b8 Mon Sep 17 00:00:00 2001
From: skirtle <65301168+skirtles-code@users.noreply.github.com>
Date: Sun, 5 Feb 2023 00:43:50 +0000
Subject: [PATCH 04/10] Another draft of the glossary

---
 src/glossary/index.md | 122 +++++++++++++++++++++++++++---------------
 1 file changed, 79 insertions(+), 43 deletions(-)

diff --git a/src/glossary/index.md b/src/glossary/index.md
index 5af0dc1051..5221182985 100644
--- a/src/glossary/index.md
+++ b/src/glossary/index.md
@@ -1,6 +1,6 @@
 # Glossary
 
-This glossary is intended to provide some rough 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.
+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.
 
 [[TOC]]
 
@@ -11,7 +11,7 @@ An *async component* is a wrapper around another component that allows for the w
 Vue Router has a similar feature for the [lazy loading of route components](https://router.vuejs.org/guide/advanced/lazy-loading.html), though this does not use Vue's async component feature.
 
 For more details see:
-- [Async Components](/guide/components/async.html)
+- [Guide - Async Components](/guide/components/async.html)
 
 ## compiler macro
 
@@ -39,7 +39,7 @@ const HelloWorldComponent = {
 }
 ```
 
-In practice, most Vue applications are written using [Single-File Components](#single-file-component) (`.vue` files). While these components may not appear to be objects at first glance, they are ultimately compiled into an object, which becomes the default export for the file. From an external perspective, a `.vue` file is just an ES module that exports a component object.
+In practice, most Vue applications are written using [Single-File Components](#single-file-component) (`.vue` files). While these components may not appear to be objects at first glance, the SFC compiler will convert them into an object, which is used as the default export for the file. From an external perspective, a `.vue` file is just an ES module that exports a component object.
 
 The properties of a component object are usually referred to as *options*. This is where the [Options API](#options-api) gets its name.
 
@@ -47,21 +47,28 @@ The options for a component define how instances of that component should be cre
 
 The term component can also be used more loosely to refer to component instances.
 
-A [functional component](#functional-component) is a special type of component that is defined using a function rather than an object.
-
 For more details see:
 - [Guide - Component Basics](/guide/essentials/component-basics.html)
 
+The word 'component' also features in several other terms:
+- [async component](#async-component)
+- [dynamic component](#dynamic-component)
+- [functional component](#functional-component)
+- [Web Component](#web-component)
+
 ## composable
 
 The term *composable* describes a common usage pattern in Vue. It isn't a separate feature of Vue, it's just a way of using the framework's Composition API. As with many patterns, there can be some disagreement about whether specific code qualifies for the label.
 
+Some common features of the composable pattern:
+
+* Composables are used to encapsulate and reuse stateful logic.
 * A composable is a function.
-* The function name usually begins with `use` so that other developers know it's a composable.
-* The function is typically expected to be called from inside a component's `setup()` function (or within a `<script setup>` block). This ties the invocation of the composable to the current component context, e.g. via calls to `provide()`, `inject` or `onMounted()`. Occasionally a composable may be designed to be called from elsewhere, such as a lifecycle hook.
-* Composables typically return a plain object, not a reactive object. This object is usually expected to be destructured within the calling code.
+* The function name usually begins with `use`, so that other developers know it's a composable.
+* The function is typically expected to be called during the synchronous execution of a component's `setup()` function (or, equivalently, during the execution of a `<script setup>` block). This ties the invocation of the composable to the current component context, e.g. via calls to `provide()`, `inject()` or `onMounted()`.
+* Composables typically return a plain object, not a reactive object. This object usually contains refs and functions and is expected to be destructured within the calling code.
 
-<!-- TODO: Say more -->
+Not all JavaScript utility functions are composables. If a function doesn't use the Composition API then it probably isn't a composable. If it doesn't expect to be called during the synchronous execution of `setup()` then it probably isn't a composable. Composables are specifically used to encapsulate stateful logic, they are not just a naming convention for functions.
 
 See [Guide - Composables](/guide/reusability/composables.html) for more details about writing composables.
 
@@ -69,7 +76,7 @@ See [Guide - Composables](/guide/reusability/composables.html) for more details
 
 The *Composition API* is a collection of functions used to write components and composables in Vue. It includes the [Reactivity API](#reactivity-api), as well as various other functions, such as `provide()` and `inject()` and lifecycle hooks such as `onMounted()`.
 
-In the context of authoring components, a component would typically be described as a 'Composition API component' if it uses `<script setup>` or has an explicit `setup()` function.
+In the context of authoring components, a component would typically be described as a Composition API component if it uses `<script setup>` or has an explicit `setup()` function.
 
 For example, it would be common to describe either one of these examples as Composition API components:
 
@@ -113,9 +120,11 @@ Even though `computed()` is part of the Composition API, the component above wou
 
 ## custom element
 
-The term *custom element* is not unique to Vue. It is part of the Web Components standard, which is implemented in modern web browsers. It refers to the ability to use a custom HTML element in your HTML markup to include a Web Component at that point in the page.
+A *custom element* is a feature of the [Web Components](#web-components) standard, which is implemented in modern web browsers. It refers to the ability to use a custom HTML element in your HTML markup to include a Web Component at that point in the page.
 
-Vue's HTML-like template syntax also allows for custom elements to be used to integrate Web Components within a Vue application. These should not be confused with Vue's own component system, nor the ability to include Vue components as tags within a template.
+Vue has built-in support for rendering custom elements and allows them to be used directly in Vue component templates.
+
+Custom elements should not be confused with the ability to include Vue components as tags within another component's template. Custom elements are used to create Web Components, not Vue components.
 
 For more details see:
 - [Guide - Vue and Web Components](/guide/extras/web-components.html)
@@ -134,7 +143,9 @@ For more details see:
 
 ## dynamic component
 
-A *dynamic component* is not a specific type of component. Instead, the term refers to cases where the choice of which child component to render needs to be made dynamically. Typically, this is achieved using `<component :is="type">`.
+The term *dynamic component* is used to describe cases where the choice of which child component to render needs to be made dynamically. Typically, this is achieved using `<component :is="type">`.
+
+A dynamic component is not a special type of component. Any component can be used as a dynamic component. It is the choice of component that is dynamic, rather than the component itself.
 
 For more details see:
 - [Guide - Components Basics - Dynamic Components](/guide/essentials/component-basics.html#dynamic-components)
@@ -145,7 +156,7 @@ See [reactive effect](#reactive-effect) and [side effect](#side-effect).
 
 ## event
 
-The idea of an *event* is common in many different areas of programming. Within Vue the term is commonly applied to both native HTML element events and custom component events. The `v-on` directive is used in templates to listen for both types of event. 
+The use of events for communicating between different parts of a program is common to many different areas of programming. Within Vue, the term is commonly applied to both native HTML element events and Vue component events. The `v-on` directive is used in templates to listen for both types of event. 
 
 For more details see:
 - [Guide - Event Handling](/guide/essentials/event-handling.html)
@@ -153,27 +164,38 @@ For more details see:
 
 ## fragment
 
-The term *fragment* refers to a VNode that is used as a parent for other VNodes, but which doesn't render any elements itself.
+The term *fragment* refers to a special type of [VNode](#vnode) that is used as a parent for other VNodes, but which doesn't render any elements itself.
 
 The name comes from the similar concept of a [`DocumentFragment`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentFragment) in the standard DOM.
 
-Fragments are used to support components with multiple root nodes. While such components might appear to have multiple roots, behind the scenes they actually use a fragment node as a single root, as a parent of the 'root' nodes.
+Fragments are used to support components with multiple root nodes. While such components might appear to have multiple roots, behind the scenes they use a fragment node as a single root, as a parent of the 'root' nodes.
 
-Fragments are also used by the template compiler as a way to wrap multiple dynamic nodes, e.g. those created via `v-for` or `v-if`. This allows for extra hints to be passed to the VDOM patching algorithm. Much of this is handled internally, but one place you'll encounter this directly is using a `key` on a `<template>` tag with `v-for`. In that scenario, the `key` is added as a prop to the fragment VNode.
+Fragments are also used by the template compiler as a way to wrap multiple dynamic nodes, e.g. those created via `v-for` or `v-if`. This allows for extra hints to be passed to the VDOM patching algorithm. Much of this is handled internally, but one place you may encounter this directly is using a `key` on a `<template>` tag with `v-for`. In that scenario, the `key` is added as a prop to the fragment VNode.
 
-Fragment nodes are currently rendered to the DOM as empty text nodes, though that is an implementation detail. You may encounter that node if you use `$el` or attempt to walk the DOM with built-in browser APIs.
+Fragment nodes are currently rendered to the DOM as empty text nodes, though that is an implementation detail. You may encounter those text nodes if you use `$el` or attempt to walk the DOM with built-in browser APIs.
 
 ## functional component
 
-A component definition is usually an object containing options. Even if you're using `<script setup>`, the component exported from the `.vue` file will be an object.
+A component definition is usually an object containing options. It may not appear that way if you're using `<script setup>`, but the component exported from the `.vue` file will still be an object.
 
-A *functional component* is an alternative form of component that is declared using a function instead. That function acts as the render function for the component.
+A *functional component* is an alternative form of component that is declared using a function instead. That function acts as the [render function](#render-function) for the component.
 
 A functional component cannot have any state of its own. It also doesn't go through the usual component lifecycle, so lifecycle hooks can't be used. This makes them slightly lighter than normal, stateful components.
 
 For more details see:
 - [Guide - Render Functions & JSX - Functional Components](/guide/extras/render-function.html#functional-components)
 
+## hoisting
+
+The term *hoisting* is used to describe running a section of code before it is reached, ahead of other code. The execution is 'pulled up' to an earlier point.
+
+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.
+
+For more details see:
+- [Guide - Rendering Mechanism - Static Hoisting](/guide/extras/rendering-mechanism.html#static-hoisting)
+
 ## in-DOM template
 
 There are various ways to specify a template for a component. In most cases the template is provided as a string.
@@ -193,7 +215,7 @@ See [provide / inject](#provide-inject).
 
 ## lifecycle hooks
 
-A specific instance of a Vue component goes through a lifecycle. For example, it is created, mounted, updated, and unmounted.
+A Vue component instance goes through a lifecycle. For example, it is created, mounted, updated, and unmounted.
 
 The *lifecycle hooks* are a way to listen for these lifecycle events.
 
@@ -217,11 +239,11 @@ For more details see:
 
 Vue components are defined using objects. The properties of these component objects are known as *options*.
 
-Components can be written in two styles. One style uses the Composition API in conjunction with `setup` (either via a `setup()` option or `<script setup>`). The other style makes very little use of the Composition API, instead using various component options to achieve a similar result. The component options that are used in this way are referred to as the *Options API*.
+Components can be written in two styles. One style uses the [Composition API](#composition-api) in conjunction with `setup` (either via a `setup()` option or `<script setup>`). The other style makes very little direct use of the Composition API, instead using various component options to achieve a similar result. The component options that are used in this way are referred to as the *Options API*.
 
-The Options API includes options such as `data()`, `computed`, `methods` and `created`.
+The Options API includes options such as `data()`, `computed`, `methods` and `created()`.
 
-Some options, such as `props`, `emits` and `inheritAttrs`, can be used with either API. As they are component options, they can be considered part of the Options API. However, as these options are also used in conjunction with `setup()`, it is usually more useful to think of them as shared between the two component styles.
+Some options, such as `props`, `emits` and `inheritAttrs`, can be used when authoring components with either API. As they are component options, they can be considered part of the Options API. However, as these options are also used in conjunction with `setup()`, it is usually more useful to think of them as shared between the two component styles.
 
 The `setup()` function itself is a component option, so it *could* be described as part of the Options API. However, this is not how the term 'Options API' is normally used. Instead, the `setup()` function is considered to be part of Composition API.
 
@@ -236,7 +258,7 @@ For more details see:
 
 ## prop
 
-There are three common uses of the term *prop*:
+There are three common uses of the term *prop* in Vue:
 
 * Component props
 * VNode props
@@ -244,7 +266,7 @@ There are three common uses of the term *prop*:
 
 *Component props* are what most people think of as props. These are explicitly defined by a component using either `defineProps()` or the `props` option.
 
-*VNode props* refers to the properties of the object passed as the second argument to `h()`. These can include component props, but they can also include component events, DOM events, DOM attributes and DOM properties. You'd usually only encounter VNode props if you're working with render functions to manipulate VNodes directly.
+The term *VNode props* refers to the properties of the object passed as the second argument to `h()`. These can include component props, but they can also include component events, DOM events, DOM attributes and DOM properties. You'd usually only encounter VNode props if you're working with render functions to manipulate VNodes directly.
 
 *Slot props* are the properties passed to a scoped slot.
 
@@ -252,6 +274,11 @@ In all cases, props are properties that are passed in from elsewhere.
 
 While the word props is derived from the word *properties*, the term props has a much more specific meaning in the context of Vue. You should avoid using it as an abbreviation of properties.
 
+For more details see:
+- [Guide - Props](/guide/components/props.html)
+- [Guide - Render Functions & JSX](/guide/extras/render-function.html)
+- [Guide - Slots - Scoped Slots](/guide/components/slots.html#scoped-slots)
+
 ## provide / inject
 
 `provide` and `inject` are a form of inter-component communication.
@@ -284,7 +311,7 @@ In general, *reactivity* refers to the ability to automatically perform actions
 
 In a Vue context, reactivity is used to describe a collection of features. Those features combine to form a *reactivity system*, which is exposed via the [Reactivity API](#reactivity-api).
 
-There are various different ways that reactivity can be implemented. For example, it can be done by static analysis of code to determine its dependencies. However, Vue doesn't employ that form of reactivity system.
+There are various different ways that a reactivity system could be implemented. For example, it could be done by static analysis of code to determine its dependencies. However, Vue doesn't employ that form of reactivity system.
 
 Instead, Vue's reactivity system tracks property access at runtime. It does this using both Proxy wrappers and getter/setter functions for properties.
 
@@ -294,7 +321,7 @@ For more details see:
 
 ## Reactivity API
 
-The *Reactivity API* refers to the core Vue functions related to reactivity. These can be used independently of components. It includes functions such as `ref()`, `reactive()`, `computed()`, `watch()` and `watchEffect()`.
+The *Reactivity API* is a collection of core Vue functions related to [reactivity](#reactivity). These can be used independently of components. It includes functions such as `ref()`, `reactive()`, `computed()`, `watch()` and `watchEffect()`.
 
 The Reactivity API is a subset of the Composition API.
 
@@ -305,11 +332,11 @@ For more details see:
 
 ## ref
 
-For the `ref` attribute used in templates, see [template ref](#template-ref) instead.
+> This entry is about the use of `ref` for reactivity. For the `ref` attribute used in templates, see [template ref](#template-ref) instead.
 
 A `ref` is part of Vue's reactivity system. It is an object with a single reactive property, called `value`.
 
-Vue provides 4 functions to create refs directly: `ref()`, `shallowRef()`, `computed()` and `customRef()`.
+There are various different types of ref. For example, refs can be created using `ref()`, `shallowRef()`, `computed()`, and `customRef()`. The function `isRef()` can be used to check whether an object is a ref, and `isReadonly()` can be used to check whether the ref allows the direct reassignment of its value.
 
 For more details see:
 - [Guide - Reactivity Fundamentals](/guide/essentials/reactivity-fundamentals.html)
@@ -326,21 +353,21 @@ For more details see:
 
 ## scheduler
 
-The *scheduler* is the part of Vue's internals that controls the timing of when reactive effects are run. 
+The *scheduler* is the part of Vue's internals that controls the timing of when [reactive effects](#reactive-effect) are run. 
 
-When reactive state changes, Vue doesn't immediately trigger rendering updates. Instead, it batches them together using a queue. This ensures that a component only re-renders once, even if multiple changes need making to the underlying data.
+When reactive state changes, Vue doesn't immediately trigger rendering updates. Instead, it batches them together using a queue. This ensures that a component only re-renders once, even if multiple changes are made to the underlying data.
 
 There are two other queues inside the scheduler. The `flush: 'pre'` queue is processed prior to the rendering queue. The `flush: 'post'` queue runs after the rendering queue. These two queues are used by watchers, with `flush: 'pre'` being the default.
 
-Jobs in the scheduler queues are also used to perform various other internal tasks, such as triggering lifecycle hooks or updating template refs.
+Jobs in the scheduler queues are also used to perform various other internal tasks, such as triggering some [lifecycle hooks](#lifecycle-hooks) and updating [template refs](#template-refs).
 
 ## scoped slot
 
-The term *scoped slot* is used to refer to slots that receive props.
+The term *scoped slot* is used to refer to a [slot](#slot) that receives [props](#props).
 
-Historically, Vue made a much clearer distinction between scoped and non-scoped slots. To some extent they could be regarded as two separate features, with template syntax hiding the distinction in the most common cases.
+Historically, Vue made a much greater distinction between scoped and non-scoped slots. To some extent they could be regarded as two separate features, unified behind a common template syntax.
 
-In Vue 3, the slot APIs were simplified to make all slots behave like scoped slots. However, the use cases for scoped and non-scoped slots often differ, so the term still proves useful when referring to slots with props.
+In Vue 3, the slot APIs were simplified to make all slots behave like scoped slots. However, the use cases for scoped and non-scoped slots often differ, so the term still proves useful as a way to refer to slots with props.
 
 The props passed to a slot can only be used within a specific region of the parent template, responsible for defining the slot's contents. This region of the template behaves as a variable scope for the props, hence 'scoped slot'.
 
@@ -357,7 +384,7 @@ The term *side effect* is not specific to Vue. It is used to describe operations
 
 For example, in the context of setting a property like `user.name = null`, it is expected that this will change the value of `user.name`. If it also does something else, like triggering Vue's reactivity system, then this would be described as a side effect. This is the origin of the term [reactive effect](#reactive-effect) within Vue.
 
-When a function is described as having side effects, it means that the function performs some sort of action that is observable outside the function, aside from just returning a value. This might mean that it updates a value in state, or trigger a network request.
+When a function is described as having side effects, it means that the function performs some sort of action that is observable outside the function, aside from just returning a value. This might mean that it updates a value in state, or triggers a network request.
 
 The term is often used when describing rendering or computed properties. It is considered best practice for rendering to have no side effects. Likewise, the getter function for a computed property should have no side effects.
 
@@ -378,13 +405,13 @@ For more details see:
 
 ## template ref
 
-The term *template ref* refers to using a `ref` attribute on a tag within a template. After a component renders, this attribute is used to populate a corresponding property with either the HTML element or the component instance that corresponds to the tag in the template.
+The term *template ref* refers to using a `ref` attribute on a tag within a template. After the component renders, this attribute is used to populate a corresponding property with either the HTML element or the component instance that corresponds to the tag in the template.
 
-Template refs should not be confused with the refs found in Vue's reactivity system.
+If you are using the Options API then the refs are exposed via properties of the `$refs` object.
 
-If you are using the Options API then the refs are exposed via property of the `$refs` object.
+With the Composition API, template refs populate a reactive [ref](#ref) with the same name.
 
-With the Composition API, template refs populate a reactive ref with the same name.
+Template refs should not be confused with the reactive refs found in Vue's reactivity system.
 
 For more details see:
 - [Guide - Template Refs](/guide/essentials/template-refs.html)
@@ -397,13 +424,13 @@ See [virtual DOM](#virtual-dom).
 
 The term *virtual DOM* is not unique to Vue. It is a common approach used by several UI frameworks for managing updates to the UI.
 
-Browsers use a tree of nodes to represent the current state of the page. That tree, and the JavaScript APIs used to interact with it, are referred to as the *document object model*, or DOM.
+Browsers use a tree of nodes to represent the current state of the page. That tree, and the JavaScript APIs used to interact with it, are referred to as the *document object model*, or *DOM*.
 
 Manipulating the DOM is a major performance bottleneck. The virtual DOM provides one strategy for managing that.
 
 Rather than creating DOM nodes directly, Vue components generate a description of what DOM nodes they would like. These descriptors are plain JavaScript objects, known as VNodes (virtual DOM nodes). Creating VNodes is relatively cheap.
 
-Every time a component re-renders, the new tree of VNodes is compared to the previous tree of VNodes and any difference are then applied to the real DOM. If nothing has changed then the DOM doesn't need to be touched.
+Every time a component re-renders, the new tree of VNodes is compared to the previous tree of VNodes and any differences are then applied to the real DOM. If nothing has changed then the DOM doesn't need to be touched.
 
 For more details see:
 - [Guide - Rendering Mechanism](/guide/extras/rendering-mechanism.html)
@@ -414,3 +441,12 @@ For more details see:
 A *VNode* is a *virtual DOM node*. They can be created using the [`h()`](/api/render-function.html#h) function.
 
 See [virtual DOM](#virtual-dom) for more information.
+
+## Web Component
+
+The *Web Components* standard is a collection of features implemented in modern web browsers.
+
+Vue components are not Web Components, but `defineCustomElement()` can be used to create a [custom element](#custom-element) from a Vue component. Vue also supports the use of custom elements inside Vue components.
+
+For more details see:
+- [Guide - Vue and Web Components](/guide/extras/web-components.html)

From 504f335a9d5c2781ee472d59c1ef8fa508fc8749 Mon Sep 17 00:00:00 2001
From: skirtle <65301168+skirtles-code@users.noreply.github.com>
Date: Mon, 6 Mar 2023 02:14:12 +0000
Subject: [PATCH 05/10] Add static link anchors

---
 src/glossary/index.md | 78 +++++++++++++++++++++----------------------
 1 file changed, 39 insertions(+), 39 deletions(-)

diff --git a/src/glossary/index.md b/src/glossary/index.md
index 5221182985..454bbfe453 100644
--- a/src/glossary/index.md
+++ b/src/glossary/index.md
@@ -1,10 +1,10 @@
-# Glossary
+# Glossary {#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.
 
 [[TOC]]
 
-## async component
+## async component {#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.
 
@@ -13,7 +13,7 @@ Vue Router has a similar feature for the [lazy loading of route components](http
 For more details see:
 - [Guide - Async Components](/guide/components/async.html)
 
-## compiler macro
+## compiler macro {#compiler-macro}
 
 A *compiler macro* is special code that is processed by a compiler and converted into something else. They are effectively just a clever form of string replacement.
 
@@ -23,7 +23,7 @@ Macros have limitations on their use that don't apply to normal JavaScript code.
 
 These macros are conceptually similar to dynamic imports using `import()`. While `import()` looks a lot like a function call, it's actually special syntax that gets processed by the bundler as part of the build. Like with `defineProps()`, we can't create an alias using `const myImport = import`. There are also restrictions on exactly what syntax can be used to pass values to the 'function', so that the compiler can understand the values.
 
-## component
+## component {#component}
 
 The term *component* is not unique to Vue. It is common to many UI frameworks. It describes a chunk of the UI, such as a button or checkbox. Components can also be combined to form larger components.
 
@@ -56,7 +56,7 @@ The word 'component' also features in several other terms:
 - [functional component](#functional-component)
 - [Web Component](#web-component)
 
-## composable
+## composable {#composable}
 
 The term *composable* describes a common usage pattern in Vue. It isn't a separate feature of Vue, it's just a way of using the framework's Composition API. As with many patterns, there can be some disagreement about whether specific code qualifies for the label.
 
@@ -72,7 +72,7 @@ Not all JavaScript utility functions are composables. If a function doesn't use
 
 See [Guide - Composables](/guide/reusability/composables.html) for more details about writing composables.
 
-## Composition API
+## Composition API {#composition-api}
 
 The *Composition API* is a collection of functions used to write components and composables in Vue. It includes the [Reactivity API](#reactivity-api), as well as various other functions, such as `provide()` and `inject()` and lifecycle hooks such as `onMounted()`.
 
@@ -118,7 +118,7 @@ export default {
 
 Even though `computed()` is part of the Composition API, the component above would usually be described as being an Options API component, not a Composition API component.
 
-## custom element
+## custom element {#custom-element}
 
 A *custom element* is a feature of the [Web Components](#web-components) standard, which is implemented in modern web browsers. It refers to the ability to use a custom HTML element in your HTML markup to include a Web Component at that point in the page.
 
@@ -129,7 +129,7 @@ Custom elements should not be confused with the ability to include Vue component
 For more details see:
 - [Guide - Vue and Web Components](/guide/extras/web-components.html)
 
-## directive
+## directive {#directive}
 
 The term *directive* refers to template attributes beginning with the `v-` prefix, or their equivalent shorthands.
 
@@ -141,7 +141,7 @@ For more details see:
 - [Guide - Template Syntax - Directives](/guide/essentials/template-syntax.html#directives)
 - [Guide - Custom Directives](/guide/reusability/custom-directives.html)
 
-## dynamic component
+## dynamic component {#dynamic-component}
 
 The term *dynamic component* is used to describe cases where the choice of which child component to render needs to be made dynamically. Typically, this is achieved using `<component :is="type">`.
 
@@ -150,11 +150,11 @@ A dynamic component is not a special type of component. Any component can be use
 For more details see:
 - [Guide - Components Basics - Dynamic Components](/guide/essentials/component-basics.html#dynamic-components)
 
-## effect
+## effect {#effect}
 
 See [reactive effect](#reactive-effect) and [side effect](#side-effect).
 
-## event
+## event {#event}
 
 The use of events for communicating between different parts of a program is common to many different areas of programming. Within Vue, the term is commonly applied to both native HTML element events and Vue component events. The `v-on` directive is used in templates to listen for both types of event. 
 
@@ -162,7 +162,7 @@ For more details see:
 - [Guide - Event Handling](/guide/essentials/event-handling.html)
 - [Guide - Component Events](/guide/components/events.html)
 
-## fragment
+## fragment {#fragment}
 
 The term *fragment* refers to a special type of [VNode](#vnode) that is used as a parent for other VNodes, but which doesn't render any elements itself.
 
@@ -174,7 +174,7 @@ Fragments are also used by the template compiler as a way to wrap multiple dynam
 
 Fragment nodes are currently rendered to the DOM as empty text nodes, though that is an implementation detail. You may encounter those text nodes if you use `$el` or attempt to walk the DOM with built-in browser APIs.
 
-## functional component
+## functional component {#functional-component}
 
 A component definition is usually an object containing options. It may not appear that way if you're using `<script setup>`, but the component exported from the `.vue` file will still be an object.
 
@@ -185,7 +185,7 @@ A functional component cannot have any state of its own. It also doesn't go thro
 For more details see:
 - [Guide - Render Functions & JSX - Functional Components](/guide/extras/render-function.html#functional-components)
 
-## hoisting
+## hoisting {#hoisting}
 
 The term *hoisting* is used to describe running a section of code before it is reached, ahead of other code. The execution is 'pulled up' to an earlier point.
 
@@ -196,7 +196,7 @@ In a Vue context, the template compiler applies *static hoisting* to improve per
 For more details see:
 - [Guide - Rendering Mechanism - Static Hoisting](/guide/extras/rendering-mechanism.html#static-hoisting)
 
-## in-DOM template
+## in-DOM template {#in-dom-template}
 
 There are various ways to specify a template for a component. In most cases the template is provided as a string.
 
@@ -209,11 +209,11 @@ For more details see:
 - [Guide - Component Basics - DOM Template Parsing Caveats](/guide/essentials/component-basics.html#dom-template-parsing-caveats)
 - [Options: Rendering - template](/api/options-rendering.html#template)
 
-## inject
+## inject {#inject}
 
 See [provide / inject](#provide-inject).
 
-## lifecycle hooks
+## lifecycle hooks {#lifecycle-hooks}
 
 A Vue component instance goes through a lifecycle. For example, it is created, mounted, updated, and unmounted.
 
@@ -224,18 +224,18 @@ With the Options API, each hook is provided as a separate option, e.g. `mounted`
 For more details see:
 - [Guide - Lifecycle Hooks](/guide/essentials/lifecycle.html)
 
-## macro
+## macro {#macro}
 
 See [compiler macro](#compiler-macro).
 
-## named slot
+## named slot {#named-slot}
 
 A component can have multiple slots, differentiated by name. Slots other than the default slot are referred to as *named slots*.
 
 For more details see:
 - [Guide - Slots - Named Slots](/guide/components/slots.html#named-slots)
 
-## Options API
+## Options API {#options-api}
 
 Vue components are defined using objects. The properties of these component objects are known as *options*.
 
@@ -247,7 +247,7 @@ Some options, such as `props`, `emits` and `inheritAttrs`, can be used when auth
 
 The `setup()` function itself is a component option, so it *could* be described as part of the Options API. However, this is not how the term 'Options API' is normally used. Instead, the `setup()` function is considered to be part of Composition API.
 
-## plugin
+## plugin {#plugin}
 
 While the term *plugin* can be used in a wide variety of contexts, Vue has a specific concept of a plugin as a way to add functionality to an application.
 
@@ -256,7 +256,7 @@ Plugins are added to an application by calling `app.use(plugin)`. The plugin its
 For more details see:
 - [Guide - Plugins](/guide/reusability/plugins.html)
 
-## prop
+## prop {#prop}
 
 There are three common uses of the term *prop* in Vue:
 
@@ -279,7 +279,7 @@ For more details see:
 - [Guide - Render Functions & JSX](/guide/extras/render-function.html)
 - [Guide - Slots - Scoped Slots](/guide/components/slots.html#scoped-slots)
 
-## provide / inject
+## provide / inject {#provide-inject}
 
 `provide` and `inject` are a form of inter-component communication.
 
@@ -292,7 +292,7 @@ When a component *provides* a value, all descendants of that component can then
 For more details see:
 - [Guide - provide / inject](/guide/components/provide-inject.html)
 
-## reactive effect
+## reactive effect {#reactive-effect}
 
 A *reactive effect* is part of Vue's reactivity system. It refers to the process of tracking the dependencies of a function and re-running that function when those dependencies change.
 
@@ -305,7 +305,7 @@ The term is derived from 'side effect'. Calling the effect function is a side ef
 For more details see:
 - [Guide - Reactivity in Depth](https://vuejs.org/guide/extras/reactivity-in-depth.html)
 
-## reactivity
+## reactivity {#reactivity}
 
 In general, *reactivity* refers to the ability to automatically perform actions in response to data changes. For example, updating the DOM or making a network request when a data value changes.
 
@@ -319,7 +319,7 @@ For more details see:
 - [Guide - Reactivity Fundamentals](/guide/essentials/reactivity-fundamentals.html)
 - [Guide - Reactivity in Depth](/guide/extras/reactivity-in-depth.html)
 
-## Reactivity API
+## Reactivity API {#reactivity-api}
 
 The *Reactivity API* is a collection of core Vue functions related to [reactivity](#reactivity). These can be used independently of components. It includes functions such as `ref()`, `reactive()`, `computed()`, `watch()` and `watchEffect()`.
 
@@ -330,7 +330,7 @@ For more details see:
 - [Reactivity API: Utilities](/api/reactivity-utilities.html)
 - [Reactivity API: Advanced](/api/reactivity-advanced.html)
 
-## ref
+## ref {#ref}
 
 > This entry is about the use of `ref` for reactivity. For the `ref` attribute used in templates, see [template ref](#template-ref) instead.
 
@@ -344,14 +344,14 @@ For more details see:
 - [Reactivity API: Utilities](/api/reactivity-utilities.html)
 - [Reactivity API: Advanced](/api/reactivity-advanced.html)
 
-## render function
+## render function {#render-function}
 
 A *render function* is the part of a component that generates the VNodes used during rendering. Templates are compiled down into render functions.
 
 For more details see:
 - [Guide - Render Functions & JSX - Functional Components](/guide/extras/render-function.html#functional-components)
 
-## scheduler
+## scheduler {#scheduler}
 
 The *scheduler* is the part of Vue's internals that controls the timing of when [reactive effects](#reactive-effect) are run. 
 
@@ -361,7 +361,7 @@ There are two other queues inside the scheduler. The `flush: 'pre'` queue is pro
 
 Jobs in the scheduler queues are also used to perform various other internal tasks, such as triggering some [lifecycle hooks](#lifecycle-hooks) and updating [template refs](#template-refs).
 
-## scoped slot
+## scoped slot {#scoped-slot}
 
 The term *scoped slot* is used to refer to a [slot](#slot) that receives [props](#props).
 
@@ -374,11 +374,11 @@ The props passed to a slot can only be used within a specific region of the pare
 For more details see:
 - [Guide - Slots - Scoped Slots](/guide/components/slots.html#scoped-slots)
 
-## SFC
+## SFC {#sfc}
 
 See [Single-File Component](#single-file-component).
 
-## side effect
+## side effect {#side-effect}
 
 The term *side effect* is not specific to Vue. It is used to describe operations or functions that do something beyond their local scope.
 
@@ -388,7 +388,7 @@ When a function is described as having side effects, it means that the function
 
 The term is often used when describing rendering or computed properties. It is considered best practice for rendering to have no side effects. Likewise, the getter function for a computed property should have no side effects.
 
-## Single-File Component
+## Single-File Component {#single-file-component}
 
 The term *Single-File Component*, or SFC, refers to the `.vue` file format that is commonly used for Vue components.
 
@@ -396,14 +396,14 @@ See also:
 - [Guide - Single-File Components](/guide/scaling-up/sfc.html)
 - [SFC Syntax Specification](/api/sfc-spec.html)
 
-## slot
+## slot {#slot}
 
 Slots are used to pass content to child components. Whereas props are used to pass data values, slots are used to pass richer content consisting of HTML elements and other Vue components.
 
 For more details see:
 - [Guide - Slots](/guide/components/slots.html)
 
-## template ref
+## template ref {#template-ref}
 
 The term *template ref* refers to using a `ref` attribute on a tag within a template. After the component renders, this attribute is used to populate a corresponding property with either the HTML element or the component instance that corresponds to the tag in the template.
 
@@ -416,11 +416,11 @@ Template refs should not be confused with the reactive refs found in Vue's react
 For more details see:
 - [Guide - Template Refs](/guide/essentials/template-refs.html)
 
-## VDOM
+## VDOM {#vdom}
 
 See [virtual DOM](#virtual-dom).
 
-## virtual DOM
+## virtual DOM {#virtual-dom}
 
 The term *virtual DOM* is not unique to Vue. It is a common approach used by several UI frameworks for managing updates to the UI.
 
@@ -436,13 +436,13 @@ For more details see:
 - [Guide - Rendering Mechanism](/guide/extras/rendering-mechanism.html)
 - [Guide - Render Functions & JSX - Functional Components](/guide/extras/render-function.html#functional-components)
 
-## VNode
+## VNode {#vnode}
 
 A *VNode* is a *virtual DOM node*. They can be created using the [`h()`](/api/render-function.html#h) function.
 
 See [virtual DOM](#virtual-dom) for more information.
 
-## Web Component
+## Web Component {#web-component}
 
 The *Web Components* standard is a collection of features implemented in modern web browsers.
 

From 7ffe0fe3d7c15cb10eb68b3e40bedfc299ce2833 Mon Sep 17 00:00:00 2001
From: skirtle <65301168+skirtles-code@users.noreply.github.com>
Date: Tue, 7 Mar 2023 01:51:56 +0000
Subject: [PATCH 06/10] A further draft of the glossary

---
 src/glossary/index.md | 36 +++++++++++++++++++-----------------
 1 file changed, 19 insertions(+), 17 deletions(-)

diff --git a/src/glossary/index.md b/src/glossary/index.md
index 454bbfe453..9eef8ae37c 100644
--- a/src/glossary/index.md
+++ b/src/glossary/index.md
@@ -8,7 +8,7 @@ This glossary is intended to provide some guidance about the meanings of technic
 
 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](https://router.vuejs.org/guide/advanced/lazy-loading.html), though this does not use Vue's async component feature.
+Vue Router has a similar feature for the [lazy loading of route components](https://router.vuejs.org/guide/advanced/lazy-loading.html), though this does not use Vue's async components feature.
 
 For more details see:
 - [Guide - Async Components](/guide/components/async.html)
@@ -21,7 +21,11 @@ Vue's [SFC](#single-file-component) compiler supports various macros, such as `d
 
 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.
 
-These macros are conceptually similar to dynamic imports using `import()`. While `import()` looks a lot like a function call, it's actually special syntax that gets processed by the bundler as part of the build. Like with `defineProps()`, we can't create an alias using `const myImport = import`. There are also restrictions on exactly what syntax can be used to pass values to the 'function', so that the compiler can understand the values.
+These macros are conceptually similar to dynamic imports using `import()`. While `import()` looks a lot like a function call, it's actually special syntax that gets processed by the bundler as part of the build. Like with `defineProps()`, we can't create an alias using `const myImport = import`. There are also restrictions on exactly what syntax can be used to pass values to the `import()` 'function', so that the bundler can understand the values.
+
+For more details see:
+- [`<script setup>` - `defineProps()` & `defineEmits()`](/api/sfc-script-setup.html#defineprops-defineemits)
+- [`<script setup>` - `defineExpose()`](/api/sfc-script-setup.html#defineexpose)
 
 ## component {#component}
 
@@ -29,7 +33,7 @@ The term *component* is not unique to Vue. It is common to many UI frameworks. I
 
 Components are the primary mechanism provided by Vue to split a UI into smaller pieces, both to improve maintainability and to allow for code reuse.
 
-A component is an object. All properties are optional, but either a template or render function is required for the component to render. For example, the following object would be a valid component:
+A Vue component is an object. All properties are optional, but either a template or render function is required for the component to render. For example, the following object would be a valid component:
 
 ```js
 const HelloWorldComponent = {
@@ -58,9 +62,7 @@ The word 'component' also features in several other terms:
 
 ## composable {#composable}
 
-The term *composable* describes a common usage pattern in Vue. It isn't a separate feature of Vue, it's just a way of using the framework's Composition API. As with many patterns, there can be some disagreement about whether specific code qualifies for the label.
-
-Some common features of the composable pattern:
+The term *composable* describes a common usage pattern in Vue. It isn't a separate feature of Vue, it's just a way of using the framework's [Composition API](#composition-api).
 
 * Composables are used to encapsulate and reuse stateful logic.
 * A composable is a function.
@@ -68,7 +70,7 @@ Some common features of the composable pattern:
 * The function is typically expected to be called during the synchronous execution of a component's `setup()` function (or, equivalently, during the execution of a `<script setup>` block). This ties the invocation of the composable to the current component context, e.g. via calls to `provide()`, `inject()` or `onMounted()`.
 * Composables typically return a plain object, not a reactive object. This object usually contains refs and functions and is expected to be destructured within the calling code.
 
-Not all JavaScript utility functions are composables. If a function doesn't use the Composition API then it probably isn't a composable. If it doesn't expect to be called during the synchronous execution of `setup()` then it probably isn't a composable. Composables are specifically used to encapsulate stateful logic, they are not just a naming convention for functions.
+As with many patterns, there can be some disagreement about whether specific code qualifies for the label. Not all JavaScript utility functions are composables. If a function doesn't use the Composition API then it probably isn't a composable. If it doesn't expect to be called during the synchronous execution of `setup()` then it probably isn't a composable. Composables are specifically used to encapsulate stateful logic, they are not just a naming convention for functions.
 
 See [Guide - Composables](/guide/reusability/composables.html) for more details about writing composables.
 
@@ -96,7 +98,7 @@ export default {
 </script>
 ```
 
-In some cases it may be necessary to use functions from the Composition API within the Options API, for example:
+In some cases it may be necessary to use functions from the Composition API within the [Options API](#options-api), for example:
 
 ```js
 import { computed } from 'vue'
@@ -124,7 +126,7 @@ A *custom element* is a feature of the [Web Components](#web-components) standar
 
 Vue has built-in support for rendering custom elements and allows them to be used directly in Vue component templates.
 
-Custom elements should not be confused with the ability to include Vue components as tags within another component's template. Custom elements are used to create Web Components, not Vue components.
+Custom elements should not be confused with the ability to include Vue components as tags within another Vue component's template. Custom elements are used to create Web Components, not Vue components.
 
 For more details see:
 - [Guide - Vue and Web Components](/guide/extras/web-components.html)
@@ -170,7 +172,7 @@ The name comes from the similar concept of a [`DocumentFragment`](https://develo
 
 Fragments are used to support components with multiple root nodes. While such components might appear to have multiple roots, behind the scenes they use a fragment node as a single root, as a parent of the 'root' nodes.
 
-Fragments are also used by the template compiler as a way to wrap multiple dynamic nodes, e.g. those created via `v-for` or `v-if`. This allows for extra hints to be passed to the VDOM patching algorithm. Much of this is handled internally, but one place you may encounter this directly is using a `key` on a `<template>` tag with `v-for`. In that scenario, the `key` is added as a prop to the fragment VNode.
+Fragments are also used by the template compiler as a way to wrap multiple dynamic nodes, e.g. those created via `v-for` or `v-if`. This allows for extra hints to be passed to the [VDOM](#virtual-dom) patching algorithm. Much of this is handled internally, but one place you may encounter this directly is using a `key` on a `<template>` tag with `v-for`. In that scenario, the `key` is added as a [prop](#prop) to the fragment VNode.
 
 Fragment nodes are currently rendered to the DOM as empty text nodes, though that is an implementation detail. You may encounter those text nodes if you use `$el` or attempt to walk the DOM with built-in browser APIs.
 
@@ -243,7 +245,7 @@ Components can be written in two styles. One style uses the [Composition API](#c
 
 The Options API includes options such as `data()`, `computed`, `methods` and `created()`.
 
-Some options, such as `props`, `emits` and `inheritAttrs`, can be used when authoring components with either API. As they are component options, they can be considered part of the Options API. However, as these options are also used in conjunction with `setup()`, it is usually more useful to think of them as shared between the two component styles.
+Some options, such as `props`, `emits` and `inheritAttrs`, can be used when authoring components with either API. As they are component options, they could be considered part of the Options API. However, as these options are also used in conjunction with `setup()`, it is usually more useful to think of them as shared between the two component styles.
 
 The `setup()` function itself is a component option, so it *could* be described as part of the Options API. However, this is not how the term 'Options API' is normally used. Instead, the `setup()` function is considered to be part of Composition API.
 
@@ -287,14 +289,14 @@ When a component *provides* a value, all descendants of that component can then
 
 `provide` and `inject` are sometimes used to avoid *prop drilling*. They can also be used as an implicit way for a component to communicate with its slot contents.
 
-`provide` can also be used as the application level, making a value available to all components within that application.
+`provide` can also be used at the application level, making a value available to all components within that application.
 
 For more details see:
 - [Guide - provide / inject](/guide/components/provide-inject.html)
 
 ## reactive effect {#reactive-effect}
 
-A *reactive effect* is part of Vue's reactivity system. It refers to the process of tracking the dependencies of a function and re-running that function when those dependencies change.
+A *reactive effect* is part of Vue's reactivity system. It refers to the process of tracking the dependencies of a function and re-running that function when the values of those dependencies change.
 
 `watchEffect()` is the most direct way to create an effect. Various other parts of Vue use effects internally. e.g. component rendering updates, `computed()` and `watch()`.
 
@@ -357,9 +359,9 @@ The *scheduler* is the part of Vue's internals that controls the timing of when
 
 When reactive state changes, Vue doesn't immediately trigger rendering updates. Instead, it batches them together using a queue. This ensures that a component only re-renders once, even if multiple changes are made to the underlying data.
 
-There are two other queues inside the scheduler. The `flush: 'pre'` queue is processed prior to the rendering queue. The `flush: 'post'` queue runs after the rendering queue. These two queues are used by watchers, with `flush: 'pre'` being the default.
+[Watchers](/guide/essentials/watchers.html) are also batched using the scheduler queue. Watchers with `flush: 'pre'` (the default) will run before component rendering, whereas those with `flush: 'post'` will run after component rendering.
 
-Jobs in the scheduler queues are also used to perform various other internal tasks, such as triggering some [lifecycle hooks](#lifecycle-hooks) and updating [template refs](#template-refs).
+Jobs in the scheduler are also used to perform various other internal tasks, such as triggering some [lifecycle hooks](#lifecycle-hooks) and updating [template refs](#template-refs).
 
 ## scoped slot {#scoped-slot}
 
@@ -369,7 +371,7 @@ Historically, Vue made a much greater distinction between scoped and non-scoped
 
 In Vue 3, the slot APIs were simplified to make all slots behave like scoped slots. However, the use cases for scoped and non-scoped slots often differ, so the term still proves useful as a way to refer to slots with props.
 
-The props passed to a slot can only be used within a specific region of the parent template, responsible for defining the slot's contents. This region of the template behaves as a variable scope for the props, hence 'scoped slot'.
+The props passed to a slot can only be used within a specific region of the parent template, responsible for defining the slot's contents. This region of the template behaves as a variable scope for the props, hence the name 'scoped slot'.
 
 For more details see:
 - [Guide - Slots - Scoped Slots](/guide/components/slots.html#scoped-slots)
@@ -422,7 +424,7 @@ See [virtual DOM](#virtual-dom).
 
 ## virtual DOM {#virtual-dom}
 
-The term *virtual DOM* is not unique to Vue. It is a common approach used by several UI frameworks for managing updates to the UI.
+The term *virtual DOM* (VDOM) is not unique to Vue. It is a common approach used by several web frameworks for managing updates to the UI.
 
 Browsers use a tree of nodes to represent the current state of the page. That tree, and the JavaScript APIs used to interact with it, are referred to as the *document object model*, or *DOM*.
 

From 810a701fe3f6a0ce21cd37d60fcbba21250ca3eb Mon Sep 17 00:00:00 2001
From: skirtle <65301168+skirtles-code@users.noreply.github.com>
Date: Mon, 20 Mar 2023 15:01:16 +0000
Subject: [PATCH 07/10] Update src/glossary/index.md

Co-authored-by: Evan You <yyx990803@gmail.com>
---
 src/glossary/index.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/glossary/index.md b/src/glossary/index.md
index 9eef8ae37c..05feccf048 100644
--- a/src/glossary/index.md
+++ b/src/glossary/index.md
@@ -15,7 +15,7 @@ For more details see:
 
 ## compiler macro {#compiler-macro}
 
-A *compiler macro* is special code that is processed by a compiler and converted into something else. They are effectively just a clever form of string replacement.
+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](#single-file-component) compiler supports various macros, such as `defineProps()`, `defineEmits()` and `defineExpose()`. These macros are intentionally designed to look like normal JavaScript functions, but they aren't functions at all. These are special strings that the compiler detects and replaces with the real JavaScript code that will run in the browser.
 

From c6968b16e63f65964ccd55d6a7ce384a5cbcea14 Mon Sep 17 00:00:00 2001
From: skirtle <65301168+skirtles-code@users.noreply.github.com>
Date: Mon, 20 Mar 2023 15:03:46 +0000
Subject: [PATCH 08/10] Update src/glossary/index.md

Co-authored-by: Evan You <yyx990803@gmail.com>
---
 src/glossary/index.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/glossary/index.md b/src/glossary/index.md
index 05feccf048..4ad7473e25 100644
--- a/src/glossary/index.md
+++ b/src/glossary/index.md
@@ -17,7 +17,7 @@ For more details see:
 
 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](#single-file-component) compiler supports various macros, such as `defineProps()`, `defineEmits()` and `defineExpose()`. These macros are intentionally designed to look like normal JavaScript functions, but they aren't functions at all. These are special strings that the compiler detects and replaces with the real JavaScript code that will run in the browser.
+Vue's [SFC](#single-file-component) 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.
 

From 2d5428c0edb4dac4d1dcca44a6b8d5070d5c9201 Mon Sep 17 00:00:00 2001
From: skirtle <65301168+skirtles-code@users.noreply.github.com>
Date: Mon, 20 Mar 2023 15:08:24 +0000
Subject: [PATCH 09/10] Update src/glossary/index.md

Co-authored-by: Evan You <yyx990803@gmail.com>
---
 src/glossary/index.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/glossary/index.md b/src/glossary/index.md
index 4ad7473e25..bf26e42239 100644
--- a/src/glossary/index.md
+++ b/src/glossary/index.md
@@ -168,7 +168,7 @@ For more details see:
 
 The term *fragment* refers to a special type of [VNode](#vnode) that is used as a parent for other VNodes, but which doesn't render any elements itself.
 
-The name comes from the similar concept of a [`DocumentFragment`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentFragment) in the standard DOM.
+The name comes from the similar concept of a [`DocumentFragment`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentFragment) in the native DOM API.
 
 Fragments are used to support components with multiple root nodes. While such components might appear to have multiple roots, behind the scenes they use a fragment node as a single root, as a parent of the 'root' nodes.
 

From bd1b7380e426afaace8d9879e5213a7a896ebe73 Mon Sep 17 00:00:00 2001
From: skirtle <65301168+skirtles-code@users.noreply.github.com>
Date: Thu, 23 Mar 2023 00:35:09 +0000
Subject: [PATCH 10/10] Integrate review feedback to the glossary

---
 src/glossary/index.md | 56 +++++++------------------------------------
 1 file changed, 9 insertions(+), 47 deletions(-)

diff --git a/src/glossary/index.md b/src/glossary/index.md
index bf26e42239..102017d80b 100644
--- a/src/glossary/index.md
+++ b/src/glossary/index.md
@@ -17,12 +17,10 @@ For more details see:
 
 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](#single-file-component) 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.
+Vue's [SFC](#single-file-component) 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.
 
-These macros are conceptually similar to dynamic imports using `import()`. While `import()` looks a lot like a function call, it's actually special syntax that gets processed by the bundler as part of the build. Like with `defineProps()`, we can't create an alias using `const myImport = import`. There are also restrictions on exactly what syntax can be used to pass values to the `import()` 'function', so that the bundler can understand the values.
-
 For more details see:
 - [`<script setup>` - `defineProps()` & `defineEmits()`](/api/sfc-script-setup.html#defineprops-defineemits)
 - [`<script setup>` - `defineExpose()`](/api/sfc-script-setup.html#defineexpose)
@@ -64,8 +62,8 @@ The word 'component' also features in several other terms:
 
 The term *composable* describes a common usage pattern in Vue. It isn't a separate feature of Vue, it's just a way of using the framework's [Composition API](#composition-api).
 
-* Composables are used to encapsulate and reuse stateful logic.
 * A composable is a function.
+* Composables are used to encapsulate and reuse stateful logic.
 * The function name usually begins with `use`, so that other developers know it's a composable.
 * The function is typically expected to be called during the synchronous execution of a component's `setup()` function (or, equivalently, during the execution of a `<script setup>` block). This ties the invocation of the composable to the current component context, e.g. via calls to `provide()`, `inject()` or `onMounted()`.
 * Composables typically return a plain object, not a reactive object. This object usually contains refs and functions and is expected to be destructured within the calling code.
@@ -76,49 +74,11 @@ See [Guide - Composables](/guide/reusability/composables.html) for more details
 
 ## Composition API {#composition-api}
 
-The *Composition API* is a collection of functions used to write components and composables in Vue. It includes the [Reactivity API](#reactivity-api), as well as various other functions, such as `provide()` and `inject()` and lifecycle hooks such as `onMounted()`.
+The *Composition API* is a collection of functions used to write components and composables in Vue.
 
-In the context of authoring components, a component would typically be described as a Composition API component if it uses `<script setup>` or has an explicit `setup()` function.
+The term is also used to describe one of the two main styles used to write components, the other being the [Options API](#options-api). Components written using the Composition API use either `<script setup>` or an explicit `setup()` function.
 
-For example, it would be common to describe either one of these examples as Composition API components:
-
-```vue
-<script setup>
-// ...
-</script>
-```
-
-```vue
-<script>
-export default {
-  setup() {
-    // ...
-  }
-}
-</script>
-```
-
-In some cases it may be necessary to use functions from the Composition API within the [Options API](#options-api), for example:
-
-```js
-import { computed } from 'vue'
-
-export default {
-  data() {
-    return {
-      message: 'hello!'
-    }
-  },
-  provide() {
-    return {
-      // explicitly provide a computed property
-      message: computed(() => this.message)
-    }
-  }
-}
-```
-
-Even though `computed()` is part of the Composition API, the component above would usually be described as being an Options API component, not a Composition API component.
+See the [Composition API FAQ](/guide/extras/composition-api-faq) for more details.
 
 ## custom element {#custom-element}
 
@@ -351,7 +311,7 @@ For more details see:
 A *render function* is the part of a component that generates the VNodes used during rendering. Templates are compiled down into render functions.
 
 For more details see:
-- [Guide - Render Functions & JSX - Functional Components](/guide/extras/render-function.html#functional-components)
+- [Guide - Render Functions & JSX](/guide/extras/render-function.html)
 
 ## scheduler {#scheduler}
 
@@ -434,9 +394,11 @@ Rather than creating DOM nodes directly, Vue components generate a description o
 
 Every time a component re-renders, the new tree of VNodes is compared to the previous tree of VNodes and any differences are then applied to the real DOM. If nothing has changed then the DOM doesn't need to be touched.
 
+Vue uses a hybrid approach that we call [Compiler-Informed Virtual DOM](/guide/extras/rendering-mechanism.html#compiler-informed-virtual-dom). Vue's template compiler is able to apply performance optimizations based on static analysis of the template. Rather than performing a full comparison of a component's old and new VNode trees at runtime, Vue can use information extracted by the compiler to reduce the comparison to just the parts of the tree that can actually change.
+
 For more details see:
 - [Guide - Rendering Mechanism](/guide/extras/rendering-mechanism.html)
-- [Guide - Render Functions & JSX - Functional Components](/guide/extras/render-function.html#functional-components)
+- [Guide - Render Functions & JSX](/guide/extras/render-function.html)
 
 ## VNode {#vnode}