Apply suggestions from code review

Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com>
Co-authored-by: Jeff Yang <32727188+ydcjeff@users.noreply.github.com>

Author: 3 people

src/api/directives.md

@@ -488,7 +488,7 @@
   This directive is provided solely for micro optimizations in performance-critical scenarios and should be rarely needed. The most common case where this may prove helpful is when rendering large `v-for` lists (where `length > 1000`):
 
   ```html
-  <div v-for="item in list" :key="itme.id" v-memo="[item.id === selected]">
+  <div v-for="item in list" :key="item.id" v-memo="[item.id === selected]">
     <p>ID: {{ id }} - selected: {{ item.id === selected }}</p>
     <p>...more child nodes</p>
   </div>

src/api/sfc-script-setup.md

@@ -4,7 +4,7 @@ sidebarDepth: 1
 
 # SFC `<script setup>`
 
-`<script setup>` is a compile-time syntactic sugar for using [Composition API](https://v3.vuejs.org/api/composition-api.html) inside Single File Components (SFCs). It is the recommended syntax if you are using both SFCs and Composition API. It provides a number of advantages over the normal `<script>` syntax:
+`<script setup>` is a compile-time syntactic sugar for using [Composition API](/api/composition-api.html) inside Single File Components (SFCs). It is the recommended syntax if you are using both SFCs and Composition API. It provides a number of advantages over the normal `<script>` syntax:
 
 - More succinct code with less boilerplate
 - Ability to declare props and emitted events using pure TypeScript
@@ -57,7 +57,7 @@ Imports are exposed in the same fashion. This means you can directly use an impo
 
 ## Reactivity
 
-Reactive state needs to be explicitly created using [Reactivity APIs](https://v3.vuejs.org/api/basic-reactivity.html). Similar to returned values from the `setup()` functions, refs are automatically unwrapped when referenced in templates:
+Reactive state needs to be explicitly created using [Reactivity APIs](/api/basic-reactivity.html). Similar to returned values from the `setup()` functions, refs are automatically unwrapped when referenced in templates:
 
 ```html
 <script setup>

src/api/sfc-spec.md

@@ -66,7 +66,7 @@ Additional custom blocks can be included in a `*.vue` file for any project speci
 - [vite-plguin-vue-gql: `<gql>`](https://github.com/wheatjs/vite-plugin-vue-gql)
 - [vue-i18n: `<i18n>`](https://github.com/intlify/bundle-tools/tree/main/packages/vite-plugin-vue-i18n#i18n-custom-block)
 
-Handling of Custom Blocks will depend on tooling - if you want to build your own custom block integrations, see [SFC Tooling](/api/sfc-tooling#custom-blocks-integration) for more details.
+Handling of Custom Blocks will depend on tooling - if you want to build your own custom block integrations, see [SFC Tooling](/api/sfc-tooling.html#custom-blocks-integration) for more details.
 
 ## Automatic `name` Inference
 

src/api/sfc-style.md

@@ -190,4 +190,4 @@ p {
 </style>
 ```
 
-The actual value will be compiled into a hashed CSS custom property so the CSS is still sattic. The custom property will be applied to component's root element via inline styles and reactively updated if the source value changes.
+The actual value will be compiled into a hashed CSS custom property so the CSS is still static. The custom property will be applied to component's root element via inline styles and reactively updated if the source value changes.

src/guide/single-file-component.md

@@ -2,7 +2,7 @@
 
 ## Introduction
 
-Vue Single File Components (aka `*.vue` files, abbreviated as **SFC**) is a special file format that allows us to encapsulate the template, logic **and** styling of a Vue component in a single file. Here's an example SFC:
+Vue Single File Components (aka `*.vue` files, abbreviated as **SFC**) is a special file format that allows us to encapsulate the template, logic, **and** styling of a Vue component in a single file. Here's an example SFC:
 
 ```vue
 <script>
@@ -81,6 +81,6 @@ Some users coming from a traditional web development background may have the con
 
 To answer this question, it is important for us to agree that **separation of concerns is not equal to separation of file types.** The ultimate goal of engieerning principles is to improve maintainability of codebases. Separation of concerns, when applied dogmatically as separation of file types, does not help us reach that goal in the context of increasingly complex frontend applications.
 
-In modern UI development, we have found that instead of dividing the codebase into three huge layers that interweave with one another, it makes much more sense to divide them into loosely-coupled components and compose them. Inside a component, its template, logic and styles are inherently coupled, and collocating them actually makes the component more cohesive and maintainable.
+In modern UI development, we have found that instead of dividing the codebase into three huge layers that interweave with one another, it makes much more sense to divide them into loosely-coupled components and compose them. Inside a component, its template, logic, and styles are inherently coupled, and collocating them actually makes the component more cohesive and maintainable.
 
-Note even if you don't like the idea of Single-File Components, you can still leverage its hot-reloading and pre-compilation features by separating your JavaScript and CSS into separate files using [Src Imports](/api/sfc-spec#src-imports).
+Note even if you don't like the idea of Single-File Components, you can still leverage its hot-reloading and pre-compilation features by separating your JavaScript and CSS into separate files using [Src Imports](/api/sfc-spec.html#src-imports).

src/guide/web-components.md

@@ -10,7 +10,7 @@ Vue [scores a perfect 100% in the Custom Elements Everywhere tests](https://cust
 
 ### Skipping Component Resolution
 
-By default, Vue will attempt to resolve a non-native HTML tag as a registered Vue component before falling back to rendering it as a custom element. This will cause Vue to emit a "failed to resovle component" warning during development. To let Vue know that certain elements should be treated as custom elements and skip component resolution, we can specify the [`compilerOptions.isCustomElement` option](https://v3.vuejs.org/api/application-config.html#compileroptions).
+By default, Vue will attempt to resolve a non-native HTML tag as a registered Vue component before falling back to rendering it as a custom element. This will cause Vue to emit a "failed to resovle component" warning during development. To let Vue know that certain elements should be treated as custom elements and skip component resolution, we can specify the [`compilerOptions.isCustomElement` option](/api/application-config.html#compileroptions).
 
 If you are using Vue with a build setup, the option should be passed via build configs since it is a compile-time option.