docs: translate step 2 of tutorial

src/tutorial/src/step-2/App/composition.js

@@ -2,11 +2,11 @@ import { ref } from 'vue'
 
 export default {
  setup() {
- // 组件逻辑
- // 此处声明一些响应式状态
+ // 組件邏輯
+ // 此處聲明一些響應式狀態
 
  return {
- // 暴露给模板
+ // 暴露給模板
  }
  }
 }

src/tutorial/src/step-2/App/options.js

@@ -1,4 +1,4 @@
 export default {
- // 组件选项
- // 此处声明一些响应式状态
+ // 組件選項
+ // 此處聲明一些響應式狀態
 }

src/tutorial/src/step-2/_hint/App/template.html

@@ -1,2 +1,2 @@
 <h1>{{ message }}</h1>
-<p>Count is: {{ counter.count }}</p>
+<p>Count: {{ counter.count }}</p>

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

@@ -1,16 +1,16 @@
-# 声明式渲染 {#declarative-rendering}
+# 聲明式渲染 {#declarative-rendering}
 
 <div class="sfc">
 
-你在编辑器中看到的是一个 Vue 单文件组件 (Single-File Component，缩写为 SFC)。SFC 是一种可复用的代码组织形式，它将从属于同一个组件的 HTML、CSS 和 JavaScript 封装在使用 `.vue` 后缀的文件中。
+你在編輯器中看到的是一個 Vue 單文件組件 (Single-File Component，縮寫為 SFC)。SFC 是一種可複用的代碼組織形式，它將從屬於同一個組件的 HTML、CSS 和 JavaScript 封裝在使用 `.vue` 後綴的文件中。
 
 </div>
 
-Vue 的核心功能是**声明式渲染**：通过扩展于标准 HTML 的模板语法，我们可以根据 JavaScript 的状态来描述 HTML 应该是什么样子的。当状态改变时，HTML 会自动更新。
+Vue 的核心功能是**聲明式渲染**：通過擴展於標準 HTML 的模板語法，我們可以根據 JavaScript 的狀態來描述 HTML 應該是什麼樣子的。當狀態改變時，HTML 會自動更新。
 
 <div class="composition-api">
 
-能在改变时触发更新的状态被称作是**响应式**的。我们可以使用 Vue 的 `reactive()` API 来声明响应式状态。由 `reactive()` 创建的对象都是 JavaScript [Proxy](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy)，其行为与普通对象一样：
+能在改變時觸發更新的狀態被稱作是**響應式**的。我們可以使用 Vue 的 `reactive()` API 來聲明響應式狀態。由 `reactive()` 創建的對象都是 JavaScript [Proxy](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy)，其行為與普通對象一樣：
 
 ```js
 import { reactive } from 'vue'
@@ -23,7 +23,7 @@ console.log(counter.count) // 0
 counter.count++
 ```
 
-`reactive()` 只适用于对象 (包括数组和内置类型，如 `Map` 和 `Set`)。而另一个 API `ref()` 则可以接受任何值类型。`ref` 会返回一个包裹对象，并在 `.value` 属性下暴露内部值。
+`reactive()` 只適用於對象 (包括數組和內置類型，如 `Map` 和 `Set`)。而另一個 API `ref()` 則可以接受任何值類型。`ref` 會返回一個包裹對象，並在 `.value` 屬性下暴露內部值。
 
 ```js
 import { ref } from 'vue'
@@ -34,17 +34,17 @@ console.log(message.value) // "Hello World!"
 message.value = 'Changed'
 ```
 
-`reactive()` 和 `ref()` 的细节在<a target="_blank" href="/guide/essentials/reactivity-fundamentals.html">指南 - 响应式基础</a>一节中有进一步讨论。
+`reactive()` 和 `ref()` 的細節在<a target="_blank" href="/guide/essentials/reactivity-fundamentals.html">指南 - 響應式基礎</a>一節中有進一步討論。
 
 <div class="sfc">
 
-在组件的 `<script setup>` 块中声明的响应式状态，可以直接在模板中使用。下面展示了我们如何使用双花括号语法，根据 `counter` 对象和 `message` ref 的值渲染动态文本：
+在組件的 `<script setup>` 塊中聲明的響應式狀態，可以直接在模板中使用。下面展示了我們如何使用雙花括號語法，根據 `counter` 對象和 `message` ref 的值渲染動態文本：
 
 </div>
 
 <div class="html">
 
-传入 `createApp()` 的对象是一个 Vue 组件。组件的状态应该在 `setup()` 函数中声明，并使用一个对象返回。
+傳入 `createApp()` 的對象是一個 Vue 組件。組件的狀態應該在 `setup()` 函數中聲明，並使用一個對象返回。
 
 ```js{2,5}
 setup() {
@@ -57,7 +57,7 @@ setup() {
 }
 ```
 
-返回对象中的属性可以在模板中使用。下面展示了我们如何使用双花括号语法，根据 `message` 的值来渲染动态文本：
+返回對象中的屬性可以在模板中使用。下面展示了我們如何使用雙花括號語法，根據 `message` 的值來渲染動態文本：
 
 </div>
 
@@ -66,15 +66,15 @@ setup() {
 <p>count is: {{ counter.count }}</p>
 ```
 
-注意我们在模板中访问的 `message` ref 时不需要使用 `.value`：它会被自动解包，让使用更简单。
+注意我們在模板中訪問的 `message` ref 時不需要使用 `.value`：它會被自動解包，讓使用更簡單。
 
 </div>
 
 <div class="options-api">
 
-能在改变时触发更新的状态被认为是**响应式**的。在 Vue 中，响应式状态被保存在组件中。<span class="html">在示例代码中，传递给 `createApp()` 的对象是一个组件。</span>
+能在改變時觸發更新的狀態被認為是**響應式**的。在 Vue 中，響應式狀態被保存在組件中。<span class="html">在示例代碼中，傳遞給 `createApp()` 的對象是一個組件。</span>
 
-我们可以使用 `data` 组件选项来声明响应式状态，该选项应该是一个返回对象的函数：
+我們可以使用 `data` 組件選項來聲明響應式狀態，該選項應該是一個返回對象的函數：
 
 <div class="sfc">
 
@@ -103,28 +103,28 @@ createApp({
 
 </div>
 
-`message` 属性可以在模板中使用。下面展示了我们如何使用双花括号法，根据 `message` 的值来渲染动态文本：
+`message` 屬性可以在模板中使用。下面展示了我們如何使用雙花括號法，根據 `message` 的值來渲染動態文本：
 
 ```vue-html
 <h1>{{ message }}</h1>
 ```
 
 </div>
 
-在双花括号中的内容并不只限于标识符或路径——我们可以使用任何有效的 JavaScript 表达式。
+在雙花括號中的內容並不只限於標識符或路徑——我們可以使用任何有效的 JavaScript 表達式。
 
 ```vue-html
 <h1>{{ message.split('').reverse().join('') }}</h1>
 ```
 
 <div class="composition-api">
 
-现在，试着自己创建一些响应式状态，用它来为模板中的 `<h1>` 渲染动态的文本内容。
+現在，試著自己創建一些響應式狀態，用它來為模板中的 `<h1>` 渲染動態的文本內容。
 
 </div>
 
 <div class="options-api">
 
-现在，试着自己创建一个数据属性，用它来为模板中的 `<h1>` 渲染动态的文本内容。
+現在，試著自己創建一個數據屬性，用它來為模板中的 `<h1>` 渲染動態的文本內容。
 
 </div>