revise based on feedback

Author: yyx990803

src/guide/essentials/application.md

@@ -1,6 +1,6 @@
 # Creating a Vue Application
 
-## The App Instance
+## The application instance
 
 Every Vue application starts by creating a new **application instance** with the [`createApp`](/api/application#createapp) function:
 
@@ -32,62 +32,36 @@ While many examples in this guide only need a single component, most real applic
 App (root component)
 ├─ TodoList
 │  └─ TodoItem
-│     ├─ DeleteTodoButton
-│     └─ EditTodoButton
-└─ TodoListFooter
-   ├─ ClearTodosButton
-   └─ TodoListStatistics
+│     ├─ TodoDeleteButton
+│     └─ TodoEditButton
+└─ TodoFooter
+   ├─ TodoClearButton
+   └─ TodoStatistics
 ```
 
 We will discuss how to define and compose multiple components together in later sections of the guide. Before that, we will focus on what happens inside a single component.
 
 ## App Configurations
 
-The app instance exposes a `.config` object that allows us to configure a few app-level options, for example defining an app-level error handler that captures errors from all descendent components:
+The application instance exposes a `.config` object that allows us to configure a few app-level options, for example defining an app-level error handler that captures errors from all descendent components:
 
 ```js
 app.config.errorHandler = (err) => {
   /* handle error */
 }
 ```
 
-You can browse the full list of `app.config` options in the [API reference](/api/application#app-config).
-
-## Global Assets
-
-The app instance is used to register "global assets" that can then be used by components within that app. We'll discuss them in detail later in the guide but here is a quick example:
-
-```js
-const app = createApp({})
-
-// register a global component
-app.component('SearchInput', SearchInputComponent)
-
-// register a global custom directive
-app.directive('focus', FocusDirective)
-
-// app-wide dependency injection
-app.provide('store', myStore)
-
-// register a plugin
-app.use(LocalePlugin)
-```
-
-Most of the methods exposed by the application instance return that same instance, so we can also use the chaining syntax:
+The application instance also provides a few methods for registering app-scoped assets. for example, registering a component:
 
 ```js
-const app = createApp({})
-  .component('SearchInput', SearchInputComponent)
-  .directive('focus', FocusDirective)
-  .provide('store', myStore)
-  .use(LocalePlugin)
+app.component('TodoDeleteButton', TodoDeleteButton)
 ```
 
-You can browse the full list of app instance methods in the [API reference](/api/application).
+This makes the `TodoDeleteButton` available for use anywhere in our app. We will discuss registration for components and other types of assets in later sections of the guide. You can also browse the full list of application instance APIs in its [API reference](/api/application).
 
 ## Mounting the App
 
-An app instance won't render anything until its `.mount()` method is called.
+An application instance won't render anything until its `.mount()` method is called.
 It expects a "container" argument, which can either be an actual DOM element or a selector string:
 
 ```html
@@ -100,7 +74,7 @@ app.mount('#app')
 
 The content of the app's root component will be rendered inside the container element. The container element itself is not considered part of the app.
 
-The `.mount()` method should always be called after all app configurations and asset registrations are done. Also note that its return value, unlike the asset registration methods, is the root component instance instead of the app instance.
+The `.mount()` method should always be called after all app configurations and asset registrations are done. Also note that its return value, unlike the asset registration methods, is the root component instance instead of the application instance.
 
 ### In-DOM Root Component Template
 
@@ -128,16 +102,20 @@ app.mount('#app')
 
 Vue will automatically use the container's `innerHTML` as the template if the root component does not already have a `template` option.
 
-## Multiple App Instances
+## Multiple application instances
 
-You are not limited to a single app instance on the same page. The `createApp` API allows multiple Vue applications to co-exist on the same page, each with its own scope for configuration and global assets:
+You are not limited to a single application instance on the same page. The `createApp` API allows multiple Vue applications to co-exist on the same page, each with its own scope for configuration and global assets:
 
 ```js
-const app1 = createApp({ /* ... */ })
+const app1 = createApp({
+  /* ... */
+})
 app1.mount('#container-1')
 
-const app2 = createApp({ /* ... */ })
+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 application instance on the entire page. Instead, create multiple small application instances and mount them on the elements they are responsible for.

src/guide/essentials/template-syntax.md

@@ -115,15 +115,17 @@ Each binding can only contain **one single expression**, so the following will *
 
 ### Calling Functions
 
-It is possible to call a component-exposed method inside a binding expression. As we'll see shortly, it's usually better to use a [computed property](computed.html) instead. However, using a function call can be useful in scenarios where computed properties aren't a viable option:
+It is possible to call a component-exposed method inside a binding expression:
 
 ```vue-html
 <span :title="toTitleDate(date)">
   {{ formatDate(date) }}
 </span>
 ```
 
-Functions called inside binding expressions should **not** have any side effects, such as changing data or triggering asynchronous operations. If you find yourself tempted to do that you should probably use a [lifecycle hook](/guide/essentials/lifecycle.html) instead.
+:::tip
+Functions called inside binding expressions will be called every time the component updates, so they should **not** have any side effects, such as changing data or triggering asynchronous operations.
+:::
 
 ### Restricted Globals Access
 
@@ -208,8 +210,6 @@ Dynamic argument expressions have some syntax constraints because certain charac
 <a :['foo' + bar]="value"> ... </a>
 ```
 
-We recommend replacing any complex expressions with a [computed property](computed.html), one of the most fundamental pieces of Vue, which we'll cover shortly.
-
 When using in-DOM templates (templates directly written in an HTML file), you should also avoid naming keys with uppercase characters, as browsers will coerce attribute names into lowercase:
 
 ```vue-html

src/guide/introduction.md

@@ -9,7 +9,7 @@ footer: false
 
 Vue (pronounced /vjuː/, like **view**) is a JavaScript framework for building user interfaces. It builds on top of standard HTML, CSS and JavaScript, and provides a declarative and component-based programming model that helps you efficiently develop user interfaces, be it simple or complex.
 
-Here is a minimal Vue counter example:
+Here is a minimal example:
 
 ```js
 import { createApp } from 'vue'
@@ -26,9 +26,8 @@ createApp({
 ```vue-html
 <div id="app">
   <button @click="count++">
-    Clicked {{ count }} time{{ count === 1 ? '' : 's' }}.
+    Count is: {{ count }}
   </button>
-  <button @click="count = 0">Reset</button>
 </div>
 ```
 
@@ -41,9 +40,8 @@ const count = ref(0)
 
 <div class="demo">
   <button @click="count++">
-    Clicked {{ count }} time{{ count === 1 ? '' : 's' }}.
+    Count is: {{ count }}
   </button>
-  <button @click="count = 0">Reset</button>
 </div>
 
 The above example demonstrates the two core features of Vue:
@@ -73,7 +71,7 @@ Despite the flexibility, the core knowledge about how Vue works is shared across
 
 ## Single-File Components
 
-In most build-tool-enabled Vue projects, we author Vue components using an HTML-like file format called **Single-File Component** (also known as `*.vue` files, abbreviated as **SFC**). A Vue SFC, as the name suggests, encapsulates the component's logic (JavaScript), template (HTML), and styles (CSS) in a single file. Here's the previous counter example, written in SFC format:
+In most build-tool-enabled Vue projects, we author Vue components using an HTML-like file format called **Single-File Component** (also known as `*.vue` files, abbreviated as **SFC**). A Vue SFC, as the name suggests, encapsulates the component's logic (JavaScript), template (HTML), and styles (CSS) in a single file. Here's the previous example, written in SFC format:
 
 ```vue
 <script>
@@ -88,9 +86,8 @@ export default {
 
 <template>
   <button @click="count++">
-    Clicked {{ count }} time{{ count === 1 ? '' : 's' }}.
+    Count is: {{ count }}
   </button>
-  <button @click="count = 0">Reset</button>
 </template>
 
 <style scoped>
@@ -170,7 +167,9 @@ onMounted(() => {
 </script>
 
 <template>
-  <button @click="increment">count is: {{ count }}</button>
+  <button @click="increment">
+    Count is: {{ count }}
+  </button>
 </template>
 ```
 
@@ -188,7 +187,7 @@ You can learn more about the comparison between the two styles and the potential
 
 If you are new to Vue, here's our general recommendation:
 
-- For learning purposes, go with the style that looks easier to understand to you. Again, most of the core concepts are shared between the two styles. Once you are familiar with one of them, the other one can be easily picked up.
+- For learning purposes, go with the style that looks easier to understand to you. Again, most of the core concepts are shared between the two styles. You can always pick up the other one at a later time.
 
 - For production use: