Merge branch 'vuejs:main' into main

Author: StephenChips

src/api/built-in-components.md

@@ -55,7 +55,7 @@ Provides animated transition effects to a **single** element or component.
      * Controls the timing sequence of leaving/entering transitions.
      * Default behavior is simultaneous.
      */
-    mode?: 'in-out' | 'out-in'
+    mode?: 'in-out' | 'out-in' | 'default'
     /**
      * Whether to apply transition on initial render.
      * Default: false

src/api/composition-api-setup.md

@@ -41,7 +41,7 @@ export default {
 Note that [refs](/api/reactivity-core.html#ref) returned from `setup` are [automatically shallow unwrapped](/guide/essentials/reactivity-fundamentals.html#deep-reactivity) when accessed in the template so you do not need to use `.value` when accessing them. They are also unwrapped in the same way when accessed on `this`.
 
 :::tip
-`setup()` itself does not have access to the component instance - `this` will have a value of `null` inside `setup()`. You can access Composition-API-exposed values from Options API, but not the other way around.
+`setup()` itself does not have access to the component instance - `this` will have a value of `undefined` inside `setup()`. You can access Composition-API-exposed values from Options API, but not the other way around.
 :::
 
 ## Accessing Props

src/api/render-function.md

@@ -93,7 +93,7 @@ Creates virtual DOM nodes (vnodes).
   })
   ```
 
-- **See also:** [Guide - Creating VNodes](/guide/extras/render-function.html#creating-vnodes)
+- **See also:** [Guide - Render Functions - Creating VNodes](/guide/extras/render-function.html#creating-vnodes)
 
 ## mergeProps()
 

src/guide/components/provide-inject.md

@@ -241,7 +241,7 @@ export default {
 
 When using reactive provide / inject values, **it is recommended to keep any mutations to reactive state inside of the _provider_ whenever possible**. This ensures that the provided state and its possible mutations are co-located in the same component, making it easier to maintain in the future.
 
-There may be times when we need to update the data from a injector component. In such cases, we recommend providing a function that is responsible for mutating the state:
+There may be times when we need to update the data from an injector component. In such cases, we recommend providing a function that is responsible for mutating the state:
 
 ```vue{7-9,13}
 <!-- inside provider component -->

src/guide/essentials/component-basics.md

@@ -468,7 +468,7 @@ This can be achieved using Vue's custom `<slot>` element:
 ```vue{4}
 <template>
   <div class="alert-box">
-    <strong>Error!</strong>
+    <strong>This is an Error for Demo Purposes</strong>
     <slot />
   </div>
 </template>

src/guide/essentials/reactivity-fundamentals.md

@@ -343,12 +343,12 @@ The `reactive()` API has two limitations:
 
 1. It only works for object types (objects, arrays, and [collection types](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects#keyed_collections) such as `Map` and `Set`). It cannot hold [primitive types](https://developer.mozilla.org/en-US/docs/Glossary/Primitive) such as `string`, `number` or `boolean`.
 
-2. Since Vue's reactivity tracking works over property access, we must always keep the same reference to the reactive object. This means we can't easily "replace" a reactive object:
+2. Since Vue's reactivity tracking works over property access, we must always keep the same reference to the reactive object. This means we can't easily "replace" a reactive object because the reactivity connection to the first reference is lost:
 
    ```js
    let state = reactive({ count: 0 })
 
-   // this won't work!
+   // the above reference ({ count: 0 }) is no longer being tracked (reactivity connection is lost!)
    state = reactive({ count: 1 })
    ```
 

src/guide/extras/web-components.md

@@ -64,7 +64,7 @@ module.exports = {
 
 ### Passing DOM Properties
 
-Since DOM attributes can only be strings, we need to pass complex data to custom elements as DOM properties. When setting props on a custom element, Vue 3 automatically checks DOM-property presence using the `in` operator and will prefer setting the value as a DOM property if the key is present. This means that, in most cases, you won't need to think about this if the custom element follows the [recommended best practices](https://developers.google.com/web/fundamentals/web-components/best-practices#aim-to-keep-primitive-data-attributes-and-properties-in-sync,-reflecting-from-property-to-attribute,-and-vice-versa.).
+Since DOM attributes can only be strings, we need to pass complex data to custom elements as DOM properties. When setting props on a custom element, Vue 3 automatically checks DOM-property presence using the `in` operator and will prefer setting the value as a DOM property if the key is present. This means that, in most cases, you won't need to think about this if the custom element follows the [recommended best practices](https://web.dev/index.md/).
 
 However, there could be rare cases where the data must be passed as a DOM property, but the custom element does not properly define/reflect the property (causing the `in` check to fail). In this case, you can force a `v-bind` binding to be set as a DOM property using the `.prop` modifier:
 

src/guide/scaling-up/state-management.md

@@ -230,7 +230,7 @@ If you are building an application that leverages [Server-Side Rendering (SSR)](
 While our hand-rolled state management solution will suffice in simple scenarios, there are many more things to consider in large-scale production applications:
 
 - Stronger conventions for team collaboration
-- Integrating with the Vue DevTools, including timeline, in-component inspection, and time-travel debugging.
+- Integrating with the Vue DevTools, including timeline, in-component inspection, and time-travel debugging
 - Hot Module Replacement
 - Server-Side Rendering support
 

src/guide/typescript/options-api.md

@@ -23,7 +23,7 @@ export default defineComponent({
   },
   mounted() {
     this.name // type: string | undefined
-    this.id // type" number | string | undefined
+    this.id // type: number | string | undefined
     this.msg // type: string
     this.metadata // type: any
   }