fix: typos (#1500)

Author: JessicaSachs

src/about/community-guide.md

@@ -46,7 +46,7 @@ Code contribution is not the only form of contribution to the Vue community. Ans
 
 Triaging an issue means gathering missing information, running the reproduction, verifying the issue's validity, and investigating the cause of the issue.
 
-We receive many issues in [our repositories on GitHub](https://github.com/vuejs) every single day. Our bandwidth is limited compared to the amount of users we have, so issue triaging alone can take an enormous amount of effort from the team. By helping us traige the issues, you are helping us become more efficient, allowing us to spend time on higher priority work.
+We receive many issues in [our repositories on GitHub](https://github.com/vuejs) every single day. Our bandwidth is limited compared to the amount of users we have, so issue triaging alone can take an enormous amount of effort from the team. By helping us triage the issues, you are helping us become more efficient, allowing us to spend time on higher priority work.
 
 You don't have to triage an issue with the goal of fixing it (although that would be nice too). Sharing the result of your investigation, for example the commit that led to the bug, can already save us a ton of time.
 

src/about/faq.md

@@ -26,7 +26,7 @@ Vue 3 is one of the most performant mainstream frontend frameworks, and handles
 
 In stress-testing scenarios, Vue out-performs React and Angular by a decent margin in the [js-framework-benchmark](https://rawgit.com/krausest/js-framework-benchmark/master/webdriver-ts-results/table.html). It also goes neck-and-neck against some of the fastest production-level non-Virtual-DOM frameworks in the benchmark.
 
-Do note that synthetic benchmarks like the above focus on raw rendering performance with dedicated optimizations and may not be fully representative of real-world performance results. If you care more about page load performance, here is the [Lighthouse audit](https://www.webpagetest.org/result/210818_BiDcYB_4a83d7a1f2a7f6fdc76db16a00b4882d/) generated via [WebPageTest](https://www.webpagetest.org/lighthouse) for a real-world, Vue-powered site with SSG pre-rendering, full page hydration and SPA client-side navigations. It scores 98 in performance on an emulated Moto G4 with 4x CPU throttling over 3G networks.
+Do note that synthetic benchmarks like the above focus on raw rendering performance with dedicated optimizations and may not be fully representative of real-world performance results. If you care more about page load performance, here is the [Lighthouse audit](https://www.webpagetest.org/result/210818_BiDcYB_4a83d7a1f2a7f6fdc76db16a00b4882d/) generated via [WebPageTest](https://www.webpagetest.org/lighthouse) for a real-world, Vue-powered site with SSG pre-rendering, full page hydration and SPA client-side navigation. It scores 98 in performance on an emulated Moto G4 with 4x CPU throttling over 3G networks.
 
 You can learn more about how Vue automatically optimizes runtime performance in the [Rendering Mechanism](/guide/extras/rendering-mechanism.html) section, and how to optimize a Vue app in particularly demanding cases in the [Performance Optimization Guide](/guide/best-practices/performance.html).
 

src/api/ApiIndex.vue

@@ -6,11 +6,11 @@ import { data as apiIndex, APIGroup } from './api.data'
 import { ref, computed } from 'vue'
 
 const query = ref('')
-const nomralize = (s: string) => s.toLowerCase().replace(/-/g, ' ')
+const normalize = (s: string) => s.toLowerCase().replace(/-/g, ' ')
 
 const filtered = computed(() => {
-  const q = nomralize(query.value)
-  const matches = (text: string) => nomralize(text).includes(q)
+  const q = normalize(query.value)
+  const matches = (text: string) => normalize(text).includes(q)
 
   return apiIndex
     .map((section) => {

src/api/api.data.ts

@@ -40,15 +40,15 @@ const headersCache = new Map<
 >()
 
 function parsePageHeaders(link: string) {
-  const fullePath = path.join(__dirname, '../', link) + '.md'
-  const timestamp = fs.statSync(fullePath).mtimeMs
+  const fullPath = path.join(__dirname, '../', link) + '.md'
+  const timestamp = fs.statSync(fullPath).mtimeMs
 
-  const cached = headersCache.get(fullePath)
+  const cached = headersCache.get(fullPath)
   if (cached && timestamp === cached.timestamp) {
     return cached.headers
   }
 
-  const src = fs.readFileSync(fullePath, 'utf-8')
+  const src = fs.readFileSync(fullPath, 'utf-8')
   const h2s = src.match(/^## [^\n]+/gm)
   let headers: string[] = []
   if (h2s) {
@@ -61,7 +61,7 @@ function parsePageHeaders(link: string) {
         .trim()
     )
   }
-  headersCache.set(fullePath, {
+  headersCache.set(fullPath, {
     timestamp,
     headers
   })

src/api/application.md

@@ -438,11 +438,11 @@ Adjusts template whitespace handling behavior.
 
 - **Details**
 
-  Vue removes / condenses whitespaces in templates to produce more efficient compiled output. The default strategy is "condense", with the following behavior:
+  Vue removes / condenses whitespace characters in templates to produce more efficient compiled output. The default strategy is "condense", with the following behavior:
 
-  1. Leading / ending whitespaces inside an element are condensed into a single space.
-  2. Whitespaces between elements that contain newlines are removed.
-  3. Consecutive whitespaces in text nodes are condensed into a single space.
+  1. Leading / ending whitespace characters inside an element are condensed into a single space.
+  2. Whitespace characters between elements that contain newlines are removed.
+  3. Consecutive whitespace characters in text nodes are condensed into a single space.
 
   Setting this option to `'preserve'` will disable (2) and (3).
 

src/api/sfc-spec.md

@@ -76,7 +76,7 @@ An SFC automatically infers the component's name from its **filename** in the fo
 
 - Dev warning formatting
 - DevTools inspection
-- Recursive self-reference. E.g. a file named `FooBar.vue` can refer to itself as `<FooBar/>` in its template. This has lower priority than explicity registered/imported components.
+- Recursive self-reference. E.g. a file named `FooBar.vue` can refer to itself as `<FooBar/>` in its template. This has lower priority than explicitly registered/imported components.
 
 ## Pre-Processors
 
@@ -103,7 +103,7 @@ p {{ msg }}
 </style>
 ```
 
-Note the intergration with pre-processors may differ based on the toolchain. Check out the respective documentations for examples:
+Note that integration with various pre-processors may differ by toolchain. Check out the respective documentation for examples:
 
 - [Vite](https://vitejs.dev](features.html#css-pre-processors)
 - [Vue CLI](https://cli.vuejs.org](css.html#pre-processors)
@@ -126,7 +126,7 @@ Beware that `src` imports follow the same path resolution rules as webpack modul
 
 ```vue
 <!-- import a file from the installed "todomvc-app-css" npm package -->
-<style src="todomvc-app-css/index.css">
+<style src="todomvc-app-css/index.css" />
 ```
 
 `src` imports also work with custom blocks, e.g.:

src/examples/src/fetching-data/App/composition.js

@@ -10,7 +10,7 @@ export default {
 
     watchEffect(async () => {
       // this effect will run immediately and then
-      // re-run whenver currentBranch.value changes
+      // re-run whenever currentBranch.value changes
       const url = `${API_URL}${currentBranch.value}`
       commits.value = await (await fetch(url)).json()
     })

src/guide/essentials/template-refs.md

@@ -93,7 +93,7 @@ See also: [Typing Template Refs](/guide/typescript/composition-api.html#typing-t
 
 <div class="composition-api">
 
-When `ref` is used inside `v-for`, the corrensponding ref should contain an Array value, which will be populated with the elements after mount:
+When `ref` is used inside `v-for`, the corresponding ref should contain an Array value, which will be populated with the elements after mount:
 
 ```vue
 <script setup>

src/guide/extras/rendering-mechanism.md

@@ -181,12 +181,12 @@ When this component needs to re-render, it only needs to traverse the flattened
 </div>
 ```
 
-A child block is tracked inside the parent block's array of dynamic descendents. This retains a stable structure for the parent block.
+A child block is tracked inside the parent block's array of dynamic descendants. This retains a stable structure for the parent block.
 
 ### Impact on SSR Hydration
 
 Both patch flags and tree flattening also greatly improve Vue's [SSR Hydration](/guide/scaling-up/ssr.html#client-hydration) performance:
 
 - Single element hydration can take fast paths based on the corresponding vnode's patch flag.
 
-- Only block nodes and their dynamic descendents need to be traversed during hydration, effectively achieving partial hydration at the template level.
+- Only block nodes and their dynamic descendants need to be traversed during hydration, effectively achieving partial hydration at the template level.

src/guide/extras/ways-of-using-vue.md

@@ -14,7 +14,7 @@ You can use Vue to [build standard Web Components](/guide/extras/web-components)
 
 ## Single-Page Application (SPA)
 
-Some applications require rich interactivity and non-trivial stateful logic on the frontend. The best way to build such applications is to use an architecture where Vue not only controls the entire page, but also handles data updates and navigations without having to reload the page. This type of application is typically referred to as a Single-Page Application (SPA).
+Some applications require rich interactivity and non-trivial stateful logic on the frontend. The best way to build such applications is to use an architecture where Vue not only controls the entire page, but also handles data updates and navigation without having to reload the page. This type of application is typically referred to as a Single-Page Application (SPA).
 
 Vue provides core libraries and [comprehensive tooling support](/guide/scaling-up/tooling) with amazing developer experience for building modern SPAs, including:
 

src/guide/extras/web-components.md

@@ -120,7 +120,7 @@ document.body.appendChild(
 
 - When the element's `disconnectedCallback` is invoked, Vue will check whether the element is detached from the document after a microtask tick.
 
-  - If the element is still in the document, it's a move and the component instance will be perserved;
+  - If the element is still in the document, it's a move and the component instance will be preserved;
 
   - If the element is detached from the document, it's a removal and the component instance will be unmounted.
 

src/guide/scaling-up/sfc.md

@@ -46,7 +46,7 @@ SFC is a defining feature of Vue as a framework, and is the recommended approach
 
 - Single-Page Applications (SPA)
 - Static Site Generation (SSG)
-- Any non-trivial frontends where a build step can be justified for better development experience (DX).
+- Any non-trivial frontend where a build step can be justified for better development experience (DX).
 
 That said, we do realize there are scenarios where SFCs can feel like overkill. This is why Vue can still be used via plain JavaScript without a build step. If you are just looking for enhancing largely static HTML with light interactions, you can also check out [petite-vue](https://github.com/vuejs/petite-vue), a 5kb subset of Vue optimized for progressive enhancement.
 

src/tutorial/src/step-11/description.md

@@ -56,7 +56,7 @@ createApp({
 
 We also need to register the component using the `components` option. Here we are using the object property shorthand to register the `ChildComp` component under the `ChildComp` key.
 
-Because we are writing the template in the DOM, it will be subject to browser's parsing rules, which is case-insensitive for tag names. Therefore, we need to use the kabab-cased name to reference the child component:
+Because we are writing the template in the DOM, it will be subject to browser's parsing rules, which is case-insensitive for tag names. Therefore, we need to use the kebab-cased name to reference the child component:
 
 ```vue-html
 <child-comp></child-comp>