tweak wording, correct typos and adjust grammar (#1366)

Author: skirtles-code

src/.vitepress/config.js

@@ -191,7 +191,7 @@ const sidebar = {
     {
       text: 'Scaling Up',
       items: [
-        { text: 'Single File Components', link: '/guide/scaling-up/sfc' },
+        { text: 'Single-File Components', link: '/guide/scaling-up/sfc' },
         { text: 'Tooling', link: '/guide/scaling-up/tooling' },
         { text: 'Routing', link: '/guide/scaling-up/routing' },
         {

src/.vitepress/theme/components/NewsLetter.vue

@@ -47,7 +47,7 @@ import { VTLink } from '@vue/theme'
           >Twitter</VTLink
         >, or join our home at
         <VTLink class="link" href="https://chat.vuejs.org/" no-icon
-          >Dicsord</VTLink
+          >Discord</VTLink
         >.
       </p>
     </div>

src/about/faq.md

@@ -16,7 +16,7 @@ The latest version of Vue (3.x) only supports [browsers with native ES2015 suppo
 
 ## Is Vue reliable?
 
-Vue is a mature and battle-tested framework. It is one of the most widely used JavaScript frameworks in production today, with over 1.5 million users worldwide, and is downloaded close to 10 millions times a month on NPM.
+Vue is a mature and battle-tested framework. It is one of the most widely used JavaScript frameworks in production today, with over 1.5 million users worldwide, and is downloaded close to 10 million times a month on npm.
 
 Vue is used in production by renowned organizations in varying capacities all around the world, including Uncyclomedia Foundation, NASA, Apple, Google, Microsoft, GitLab, Zoom, Tencent, Weibo, Bilibili, Kuaishou, and many more.
 
@@ -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 navigations. 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/advanced/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).
 
@@ -36,21 +36,21 @@ When you use a build tool, many of Vue's APIs are ["tree-shakable"](https://deve
 
 A hello world Vue app that only uses the absolutely minimal APIs has a baseline size of only around **16kb**, with minification and brotli compression. The actual size of the application will depend on how many optional features you use from the framework. In the unlikely case where an app uses every single feature that Vue provides, the total runtime size is around **27kb**.
 
-When using Vue without a build tool, we not only lose tree-shaking, but also have to ship the template compiler to the browser. This bloats up the size to around **41kb**. Therefore if you are using Vue primarily for progressive enhancement without a build step, consider using [petite-vue](https://github.com/vuejs/petite-vue) (only **6kb**) instead.
+When using Vue without a build tool, we not only lose tree-shaking, but also have to ship the template compiler to the browser. This bloats up the size to around **41kb**. Therefore, if you are using Vue primarily for progressive enhancement without a build step, consider using [petite-vue](https://github.com/vuejs/petite-vue) (only **6kb**) instead.
 
-Some frameworks, such as Svelte, use a compilation strategy that produces extremely lightweight output in single-component scenarios. However, [our research](https://github.com/yyx990803/vue-svelte-size-analysis) shows that the size difference heavily depends on the number of components in the application. While Vue has a heavier baseline size, it generates less code per component. In real world scenarios, a Vue app may very well end up being lighter.
+Some frameworks, such as Svelte, use a compilation strategy that produces extremely lightweight output in single-component scenarios. However, [our research](https://github.com/yyx990803/vue-svelte-size-analysis) shows that the size difference heavily depends on the number of components in the application. While Vue has a heavier baseline size, it generates less code per component. In real-world scenarios, a Vue app may very well end up being lighter.
 
 ## Does Vue scale?
 
-Yes. Despite common misconception that Vue is only suitable for simple use cases, Vue is perfectly capable of handling large scale applications:
+Yes. Despite a common misconception that Vue is only suitable for simple use cases, Vue is perfectly capable of handling large scale applications:
 
-- [Single File Components](/guide/scaling-up/sfc) provide a modularized development model that allows different parts of an application to be developed in isolation.
+- [Single-File Components](/guide/scaling-up/sfc) provide a modularized development model that allows different parts of an application to be developed in isolation.
 
 - [Composition API](/guide/reusability/composables) provides first-class TypeScript integration and enables clean patterns for organizing, extracting and reusing complex logic.
 
 - Comprehensive tooling support ensures a smooth development experience as the application grows.
 
-- Lower barrier of entry and excellent documentation translate to lower onboarding and training cost for new developers.
+- Lower barrier to entry and excellent documentation translate to lower onboarding and training costs for new developers.
 
 ## How do I contribute to Vue?
 
@@ -72,7 +72,7 @@ While Vue itself is implemented in TypeScript and provides first-class TypeScrip
 
 TypeScript support is an important consideration when new features are added to Vue. APIs that are designed with TypeScript in mind are typically easier for IDEs and linters to understand, even if you aren't using TypeScript yourself. Everybody wins. Vue APIs are also designed to work the same way in both JavaScript and TypeScript as much as possible.
 
-Adopting TypeScript involves a trade-off between onboarding complexity and long term maintainability gains. Whether such a trade-off can be justified can vary depending on your team's background and project scale, but Vue isn't really an influencing factor in making that decision.
+Adopting TypeScript involves a trade-off between onboarding complexity and long-term maintainability gains. Whether such a trade-off can be justified can vary depending on your team's background and project scale, but Vue isn't really an influencing factor in making that decision.
 
 ## How does Vue compare to Web Components?
 

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

@@ -1,6 +1,6 @@
 # Ways of Using Vue
 
-We believe there is no "one size fit all" story for the web. This is why Vue is designed to be flexible and incrementally adoptable. Depending on your use case, Vue can be used in different ways to strike the optimal balance between stack complexity, developer experience and end performance.
+We believe there is no "one size fits all" story for the web. This is why Vue is designed to be flexible and incrementally adoptable. Depending on your use case, Vue can be used in different ways to strike the optimal balance between stack complexity, developer experience and end performance.
 
 ## Standalone Script
 
@@ -14,7 +14,7 @@ You can use Vue to [build standard Web Components](/guide/advanced/web-component
 
 ## 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 applications are typically referred to as Single-Page Applications (SPAs).
+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).
 
 Vue provides core libraries and [comprehensive tooling support](/guide/scaling-up/tooling) with amazing developer experience for building modern SPAs, including:
 

src/guide/advanced/web-components.md

@@ -155,7 +155,7 @@ Events emitted via `this.$emit` or setup `emit` are dispatched as native [Custom
 
 #### Slots
 
-Inside the component, slots can be rendered using the `<slot/>` element as usual. However when consuming the resulting element, it only accepts [native slots syntax](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_templates_and_slots):
+Inside the component, slots can be rendered using the `<slot/>` element as usual. However, when consuming the resulting element, it only accepts [native slots syntax](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_templates_and_slots):
 
 - [Scoped slots](/guide/components/slots.html#scoped-slots) are not supported.
 
@@ -173,7 +173,7 @@ The [Provide / Inject API](/guide/components/provide-inject.html#provide-inject)
 
 ### SFC as Custom Element
 
-`defineCustomElement` also works with Vue Single File Components (SFCs). However, with the default tooling setup, the `<style>` inside the SFCs will still be extracted and merged into a single CSS file during production build. When using an SFC as a custom element, it is often desirable to inject the `<style>` tags into the custom element's shadow root instead.
+`defineCustomElement` also works with Vue Single-File Components (SFCs). However, with the default tooling setup, the `<style>` inside the SFCs will still be extracted and merged into a single CSS file during production build. When using an SFC as a custom element, it is often desirable to inject the `<style>` tags into the custom element's shadow root instead.
 
 The official SFC toolings support importing SFCs in "custom element mode" (requires `@vitejs/plugin-vue@^1.4.0` or `vue-loader@^16.5.0`). An SFC loaded in custom element mode inlines its `<style>` tags as strings of CSS and exposes them under the component's `styles` option. This will be picked up by `defineCustomElement` and injected into the element's shadow root when instantiated.
 
@@ -217,8 +217,8 @@ const MyBar = defineCustomElement(Bar)
 export { MyFoo, MyBar }
 
 export function register() {
-  customElements.register('my-foo', MyFoo)
-  customElements.register('my-bar', MyBar)
+  customElements.define('my-foo', MyFoo)
+  customElements.define('my-bar', MyBar)
 }
 ```
 

src/guide/essentials/application.md

@@ -16,7 +16,7 @@ const app = createApp({
 
 The object we are passing into `createApp` is in fact a component. Every app requires a "root component" that can contain other components as its children.
 
-If you are using Single File Components, we typically import the root component from another file:
+If you are using Single-File Components, we typically import the root component from another file:
 
 ```js
 import { createApp } from 'vue'
@@ -140,4 +140,4 @@ const app2 = createApp({ /* ... */ })
 app2.mount('#container-2')
 ```
 
-If you are using Vue to enhance server-rendered HTML and only need Vue to control specific parts of a large page, avoid mounting a singe Vue app instance on the entire page. Instead, create multiple small app instances and mount them on the elements they are responsible for.
+If you are using Vue to enhance server-rendered HTML and only need Vue to control specific parts of a large page, avoid mounting a singe Vue app instance on the entire page. Instead, create multiple small app instances and mount them on the elements they are responsible for.

src/guide/essentials/class-and-style.md

@@ -220,7 +220,7 @@ When `isActive` is truthy, the rendered HTML will be:
 <p class="foo bar active">Hi</p>
 ```
 
-If your component has multiple root elements, you would need to define which component will receive this class. You can do this using `$attrs` component property:
+If your component has multiple root elements, you would need to define which element will receive this class. You can do this using the `$attrs` component property:
 
 ```vue-html
 <!-- my-component template using $attrs -->

src/guide/essentials/component-basics.md

@@ -8,7 +8,7 @@ Vue implements its own component model, but also plays nicely with native Web Co
 
 ## Defining a Component
 
-When using a build step, we typically define each Vue component in a dedicated file using the `.vue` extension - known as a [Single File Component](/guide/scaling-up/sfc.html) (SFC for short):
+When using a build step, we typically define each Vue component in a dedicated file using the `.vue` extension - known as a [Single-File Component](/guide/scaling-up/sfc.html) (SFC for short):
 
 <div class="options-api">
 
@@ -414,7 +414,7 @@ defineEmits(['enlarge-text'])
 
 </div>
 
-This documents all the events that a component emits and optionally [validate them](/guide/components/events.html#validate-emitted-events). It also allows Vue to avoid implicitly applying them as native listeners to the child component's root element.
+This documents all the events that a component emits and optionally [validates them](/guide/components/events.html#validate-emitted-events). It also allows Vue to avoid implicitly applying them as native listeners to the child component's root element.
 
 <div class="composition-api">
 
@@ -509,15 +509,15 @@ The above is made possible by Vue's `<component>` element with the special `is`
 <div class="options-api">
 
 ```vue-html
-<!-- Component changes when currentTabComponent changes -->
+<!-- Component changes when currentTab changes -->
 <component :is="currentTab"></component>
 ```
 
 </div>
 <div class="composition-api">
 
 ```vue-html
-<!-- Component changes when currentTabComponent changes -->
+<!-- Component changes when currentTab changes -->
 <component :is="tabs[currentTab]"></component>
 ```
 
@@ -539,7 +539,7 @@ If you are writing your Vue templates directly in the DOM, Vue will have to retr
 :::tip
 It should be noted that the limitations discussed below only apply if you are writing your templates directly in the DOM. They do NOT apply if you are using string templates from the following sources:
 
-- Single File Components
+- Single-File Components
 - Inlined template strings (e.g. `template: '...'`)
 - `<script type="text/x-template">`
   :::

src/guide/essentials/computed.md

@@ -85,7 +85,7 @@ export default {
 
 Here we have declared a computed property `publishedBooksMessage`.
 
-Try to change the value of `books` array in the application `data` and you will see how `publishedBooksMessage` is changing accordingly.
+Try to change the value of the `books` array in the application `data` and you will see how `publishedBooksMessage` is changing accordingly.
 
 You can data-bind to computed properties in templates just like a normal property. Vue is aware that `this.publishedBooksMessage` depends on `this.author.books`, so it will update any bindings that depend on `vm.publishedBooksMessage` when `this.author.books` changes.
 
@@ -120,7 +120,7 @@ const publishedBooksMessage = computed(() => {
 
 [Try it in the Playground](https://sfc.vuejs.org/#eyJBcHAudnVlIjoiPHNjcmlwdCBzZXR1cD5cbmltcG9ydCB7IHJlYWN0aXZlLCBjb21wdXRlZCB9IGZyb20gJ3Z1ZSdcblxuY29uc3QgYXV0aG9yID0gcmVhY3RpdmUoe1xuICBuYW1lOiAnSm9obiBEb2UnLFxuICBib29rczogW1xuICAgICdWdWUgMiAtIEFkdmFuY2VkIEd1aWRlJyxcbiAgICAnVnVlIDMgLSBCYXNpYyBHdWlkZScsXG4gICAgJ1Z1ZSA0IC0gVGhlIE15c3RlcnknXG4gIF1cbn0pXG5cbi8vIGEgY29tcHV0ZWQgcmVmXG5jb25zdCBwdWJsaXNoZWRCb29rc01lc3NhZ2UgPSBjb21wdXRlZCgoKSA9PiB7XG4gIHJldHVybiBhdXRob3IuYm9va3MubGVuZ3RoID4gMCA/ICdZZXMnIDogJ05vJ1xufSlcbjwvc2NyaXB0PlxuXG48dGVtcGxhdGU+XG4gIDxwPkhhcyBwdWJsaXNoZWQgYm9va3M6PC9wPlxuICA8c3Bhbj57eyBwdWJsaXNoZWRCb29rc01lc3NhZ2UgfX08L3NwYW4+XG48L3RlbXBsYXRlPiIsImltcG9ydC1tYXAuanNvbiI6IntcbiAgXCJpbXBvcnRzXCI6IHtcbiAgICBcInZ1ZVwiOiBcImh0dHBzOi8vc2ZjLnZ1ZWpzLm9yZy92dWUucnVudGltZS5lc20tYnJvd3Nlci5qc1wiXG4gIH1cbn0ifQ==)
 
-Here we have declared a computed property `publishedBooksMessage`. The `computed()` method expects a getter function, and returned value is a **computed ref**. Similar to normal refs, you can access the computed result as `publishedBooksMessage.value`. Computed refs are also auto-unwrapped in templates so you can reference them without `.value` in template expressions.
+Here we have declared a computed property `publishedBooksMessage`. The `computed()` function expects to be passed a getter function, and the returned value is a **computed ref**. Similar to normal refs, you can access the computed result as `publishedBooksMessage.value`. Computed refs are also auto-unwrapped in templates so you can reference them without `.value` in template expressions.
 
 A computed property automatically tracks its reactive dependencies. Vue is aware that the computation of `publishedBooksMessage` depends on `author.books`, so it will update any bindings that depend on `publishedBooksMessage` when `author.books` changes.
 
@@ -220,7 +220,7 @@ count.value++
 
 ## Writable Computed
 
-Computed properties are by default getter-only. When you attempt to mutate a computed property, you will receive a runtime warning. In the rare cases where you need a "writable" computed property, you can create one by providing both a getter and a setter:
+Computed properties are by default getter-only. If you attempt to assign a new value to a computed property, you will receive a runtime warning. In the rare cases where you need a "writable" computed property, you can create one by providing both a getter and a setter:
 
 <div class="options-api">
 
@@ -283,7 +283,7 @@ Now when you run `fullName.value = 'John Doe'`, the setter will be invoked and `
 
 ### Getters should be side-effect free
 
-It is important to remember that computed getter functions should only perform pure computation and be free of side effects. For example, don't make async requests or mutate the DOM inside a computed getter! Think of a computed property has declaratively describing how to derive a value based on other values - its only resposnibility should be computing and returning that value. Later in the guide we will discuss how we can perform side effects in reaction to state changes with [watchers](./watchers).
+It is important to remember that computed getter functions should only perform pure computation and be free of side effects. For example, don't make async requests or mutate the DOM inside a computed getter! Think of a computed property as declaratively describing how to derive a value based on other values - its only responsibility should be computing and returning that value. Later in the guide we will discuss how we can perform side effects in reaction to state changes with [watchers](./watchers).
 
 ### Avoid mutating computed value
 

src/guide/essentials/event-handling.md

@@ -89,7 +89,7 @@ methods: {
 </div>
 
 ```vue-html
-<!-- `greet` is the name of a method defined below -->
+<!-- `greet` is the name of the method defined above -->
 <button @click="greet">Greet</button>
 ```