Merge branch 'master' into docs-bold

Author: veaba

src/.vuepress/theme/styles/index.styl

@@ -177,12 +177,13 @@ code, kbd, .line-number
 p, ul, ol
   line-height 1.7
 
-  // avoid Youku unifull.min.css pollute global css tag p margin attribute
-  p
-    margin-block-start: 1em;
-    margin-block-end: 1em;
-    margin-inline-start: 0;
-    margin-inline-end: 0;
+// avoid Youku unifull.min.css pollute global css tag p margin attribute
+p
+  margin-block-start: 1em;
+  margin-block-end: 1em;
+  margin-inline-start: 0;
+  margin-inline-end: 0;
+  
 hr
   border 0
   border-top 1px solid $borderColor

src/guide/component-basics.md

@@ -235,7 +235,7 @@ app.component('blog-post', {
 </button>
 ```
 
-多亏了`v-on:enlarge-text="postFontSize += 0.1"` 监听器，父级将接收事件并更新 `postFontSize` 值。
+多亏了 `v-on:enlarge-text="postFontSize += 0.1"` 监听器，父级将接收事件并更新 `postFontSize` 值。
 
 <p class="codepen" data-height="300" data-theme-id="39028" data-default-tab="html,result" data-user="Vue" data-slug-hash="KKpGyrp" data-editable="true" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Component basics: emitting events">
   <span>See the Pen <a href="https://codepen.io/team/Vue/pen/KKpGyrp">
@@ -339,11 +339,11 @@ app.component('custom-input', {
 <custom-input v-model="searchText"></custom-input>
 ```
 
-在自定义组件中创建 `v-model` 功能的另一种方法是使用 `computed` property 的功能来定义getter和setter。
+在自定义组件中创建 `v-model` 功能的另一种方法是使用 `computed` property 的功能来定义 getter 和 setter。
 
 在下面的示例中，我们使用计算属性重构 `<custom-input>` 组件。
 
-请记住，`get` 方法应返回 `modelValue` property，或用于绑定的任何property，`set` 方法应为该property 触发相应的 `$emit` 。
+请记住，`get` 方法应返回 `modelValue` property，或用于绑定的任何 property，`set` 方法应为该 property 触发相应的 `$emit` 。
 
 ```js
 app.component('custom-input', {
@@ -450,19 +450,19 @@ app.component('alert-box', {
 ```
 
 :::warning
-`v-is` 值应为JavaScript字符串文本：
+`v-is` 值应为 JavaScript 字符串文本：
 
 ```html
-<!-- Incorrect, nothing will be rendered -->
+<!-- 错误的，这样不会渲染任何东西 -->
 <tr v-is="blog-post-row"></tr>
 
-<!-- Correct -->
+<!-- 正确的 -->
 <tr v-is="'blog-post-row'"></tr>
 ```
 
 :::
 
-另外，HTML属性名不区分大小写，因此浏览器将把所有大写字符解释为小写。这意味着当你在DOM模板中使用时，驼峰 prop 名称和event 处理器参数需要使用它们的kebab-cased（横线字符分隔）等效值：
+另外，HTML 属性名不区分大小写，因此浏览器将把所有大写字符解释为小写。这意味着当你在 DOM 模板中使用时，驼峰 prop 名称和 event 处理器参数需要使用它们的 kebab-cased（横线字符分隔）等效值：
 
 
 ```js

src/guide/events.md

@@ -167,7 +167,7 @@ methods: {
 <!-- 阻止单击事件继续传播 -->
 <a @click.stop="doThis"></a>
 
-<!-- 阻止单击事件继续传播 -->
+<!-- 提交事件不再重载页面 -->
 <form @submit.prevent="onSubmit"></form>
 
 <!-- 修饰符可以串联 -->
@@ -295,8 +295,8 @@ Vue 为最常用的键提供了别名：
 
 你可能注意到这种事件监听的方式违背了关注点分离 (separation of concern) 这个长期以来的优良传统。但不必担心，因为所有的 Vue.js 事件处理方法和表达式都严格绑定在当前视图的 ViewModel 上，它不会导致任何维护上的困难。实际上，使用 `v-on` 或 `@` 有几个好处：
 
-扫一眼 HTML 模板便能轻松定位在 JavaScript 代码里对应的方法。
+1.扫一眼 HTML 模板便能轻松定位在 JavaScript 代码里对应的方法。
 
-因为你无须在 JavaScript 里手动绑定事件，你的 ViewModel 代码可以是非常纯粹的逻辑，和 DOM 完全解耦，更易于测试。
+2.因为你无须在 JavaScript 里手动绑定事件，你的 ViewModel 代码可以是非常纯粹的逻辑，和 DOM 完全解耦，更易于测试。
 
-当一个 ViewModel 被销毁时，所有的事件处理器都会自动被删除。你无须担心如何清理它们。
+3.当一个 ViewModel 被销毁时，所有的事件处理器都会自动被删除。你无须担心如何清理它们。

src/guide/reactivity-computed-watchers.md

@@ -32,7 +32,7 @@ console.log(count.value) // 0
 
 ## `watchEffect`
 
-为了根据反应状态*自动应用*和*重新应用*副作用，我们可以使用 `watchEffect` 方法。它立即运行一个函数，同时反应性地跟踪其依赖项，并在依赖项发生更改时重新运行它。
+为了根据反应状态*自动应用*和*重新应用*副作用，我们可以使用 `watchEffect` 方法。它立即执行传入的一个函数，同时响应式追踪其依赖，并在其依赖变更时重新运行该函数。
 
 ```js
 const count = ref(0)
@@ -46,11 +46,11 @@ setTimeout(() => {
 }, 100)
 ```
 
-### 阻止侦听器
+### 停止侦听
 
-当在组件的 [setup ()](composition-api-setup.html) 函数或[生命周期钩子](composition-api-lifecycle-hooks.html)期间调用 `watchEffect` 时，侦听器链接到组件的生命周期，并在组件卸载时自动停止。
+当 `watchEffect` 在组件的 [setup()](composition-api-setup.html) 函数或[生命周期钩子](composition-api-lifecycle-hooks.html)被调用时，侦听器会被链接到该组件的生命周期，并在组件卸载时自动停止。
 
-在其他情况下，它返回一个停止句柄，可以调用该句柄显式停止侦听器：
+在一些情况下，也可以显式调用返回值以停止侦听：
 
 ```js
 const stop = watchEffect(() => {
@@ -61,12 +61,12 @@ const stop = watchEffect(() => {
 stop()
 ```
 
-### 副作用失效
+### 清除副作用
 
-有时侦听效果函数会执行异步副作用，当它失效时 (即在效果完成之前状态改变) 需要清除这些副作用。effect 函数接收一个 `onInvalidate` 函数，该函数可用于注册无效回调。此无效回调在以下情况下调用：
+有时副作用函数会执行一些异步的副作用, 这些响应需要在其失效时清除（即完成之前状态已改变了）。所以侦听副作用传入的函数可以接收一个 `onInvalidate` 函数作入参, 用来注册清理失效时的回调。当以下情况发生时，这个失效回调会被触发:
 
-- 效果将重新运行
-- 侦听器被停止 (即，当组件卸载时，如果在 `setup()` 或生命周期钩子使用了 `watchEffect`)
+- 副作用即将重新执行时
+- 侦听器被停止 (如果在 `setup()` 或生命周期钩子函数中使用了 `watchEffect`，则在组件卸载时)
 
 ```js
 watchEffect(onInvalidate => {
@@ -79,7 +79,9 @@ watchEffect(onInvalidate => {
 })
 ```
 
-我们通过传入函数注册无效回调，而不是从回调返回它，因为返回值对于异步错误处理很重要。在执行数据获取时，effect 函数通常是异步函数：
+我们之所以是通过传入一个函数去注册失效回调，而不是从回调返回它，是因为返回值对于异步错误处理很重要。
+
+在执行数据请求时，副作用函数往往是一个异步函数：
 
 ```js
 const data = ref(null)
@@ -89,11 +91,11 @@ watchEffect(async onInvalidate => {
 })
 ```
 
-异步函数隐式返回一个 Promise，但需要在 Promise 解析之前立即注册清除函数。此外，Vue 依赖于返回的 Promise 来自动处理 Promise 链中的潜在错误。
+我们知道异步函数都会隐式地返回一个 Promise，但是清理函数必须要在 Promise 被 resolve 之前被注册。另外，Vue 依赖这个返回的 Promise 来自动处理 Promise 链上的潜在错误。
 
-### 效果冲刷时间
+### 副作用刷新时机
 
-Vue 的响应性系统缓冲无效的效果，并异步刷新它们，以避免在同一个“tick”中发生许多状态转换时不必要的重复调用。在内部，组件的 `update` 功能也是一种监视效果。当把用户效果加入队列时，它总是在所有组件 `update` 效果之后调用：
+Vue 的响应式系统会缓存副作用函数，并异步地刷新它们，这样可以避免同一个 “tick” 中多个状态改变导致的不必要的重复调用。在核心的具体实现中, 组件的 `update` 函数也是一个被侦听的副作用。当一个用户定义的副作用函数进入队列时, 会在所有的组件 `update` 后执行：
 
 ```html
 <template>
@@ -117,12 +119,12 @@ Vue 的响应性系统缓冲无效的效果，并异步刷新它们，以避免
 </script>
 ```
 
-在这例子中：
+在这个例子中：
 
-- 计数将在首次运行时同步记录。
-- 当 `count` 发生变化时，将在**组件更新后调用**回调。
+- `count` 会在初始运行时同步打印出来
+- 更改 `count` 时，将在组件**更新后**执行副作用。
 
-注意，第一次执行是在组件 mounted 之前的。因此，如果你希望在侦听效果下访问 DOM (或者模版 ref )，请在 mounted 钩子中执行：
+请注意，初始化运行是在组件 mounted 之前执行的。因此，如果你希望在编写副作用函数时访问 DOM（或模板 ref），请在 `onMounted` 钩子中进行：
 
 ```js
 onMounted(() => {
@@ -132,7 +134,7 @@ onMounted(() => {
 })
 ```
 
-在需要同步或在组件更新之前重新运行侦听器效果的情况下，我们可以使用 `flush` 选项传递一个附加的 `options` 对象 (默认为 `post`)：
+如果副作用需要同步或在组件更新之前重新运行，我们可以传递一个拥有 `flush` 属性的对象作为 `options`（默认为 `post` ）：
 
 ```js
 // 同步交火
@@ -160,10 +162,10 @@ watchEffect(
 
 `onTrack` 和 `onTrigger` 选项可用于调试侦听器的行为。
 
-- 当响应式 property 或 ref 作为依赖项被跟踪时，将调用 `onTrack`
-- 当依赖项的变化触发侦听器回调时，将调用 `onTrigger`
+- 当响应式 property 或 ref 作为依赖项被追踪时，将调用 `onTrack`
+- 当依赖项变更导致副作用被触发时，将调用 `onTrigger`
 
-两个回调都将接收一个调试器事件，其中包含有关相关依赖项的信息。建议在这些回调中放置 `debugger` 语句以交互方式检查依赖关系：
+这两个回调都将接收到一个包含有关所依赖项信息的调试器事件。建议在以下回调中编写 `debugger` 语句来检查依赖关系：
 
 ```js
 watchEffect(
@@ -182,15 +184,15 @@ watchEffect(
 
 ## `watch`
 
-`watch` API 完全等同于组件[侦听](computed.html#侦听器) property。`watch` 需要监视特定的数据源，并在单独的回调函数中应用副作用。默认情况下，它也是惰性的，即只有当被监视的源发生变化时才调用回调。
+`watch` API 完全等同于组件[侦听器](computed.html#侦听器) property。`watch` 需要侦听特定的数据源，并在回调函数中执行副作用。默认情况下，它也是惰性的，即只有当被侦听的源发生变化时才执行回调。
 
 - 与 [watchEffect](#watcheffect) 比较，`watch` 允许我们：
 
-  - 懒性地执行副作用；
+  - 懒执行副作用；
   - 更具体地说明什么状态应该触发侦听器重新运行；
-  - 访问被侦听状态的先前值和当前值。
+  - 访问侦听状态变化前后的值。
 
-### 侦听单一源
+### 侦听单个数据源
 
 侦听器数据源可以是返回值的 getter 函数，也可以直接是 `ref`：
 
@@ -211,16 +213,16 @@ watch(count, (count, prevCount) => {
 })
 ```
 
-### 侦听多个源
+### 侦听多个数据源
 
-侦听器还可以使用数组同时监视多个源：
+侦听器还可以使用数组同时侦听多个源：
 
 ```js
 watch([fooRef, barRef], ([foo, bar], [prevFoo, prevBar]) => {
   /* ... */
 })
 ```
 
-### 使用 `watchEffect` 共享行为
+### 与 `watchEffect` 共享的行为
 
-`watch` 与 [`watchEffect`](#watcheffect) 共享 [阻止侦听器](#阻止侦听器)，[副作用失效](#副作用失效) (改造将 `onInvalidate` 作为第三个参数传递给回调)、[效果冲刷时间](#效果冲刷时间) 和 [侦听器调试](#侦听器调试) 行为。
+`watch` 与 [`watchEffect`](#watcheffect) 共享 [停止侦听](#停止侦听)，[清除副作用](#清除副作用) (相应地 `onInvalidate` 会作为回调的第三个参数传入)、[副作用刷新时机](#副作用刷新时机) 和 [侦听器调试](#侦听器调试) 行为。

src/guide/typescript-support.md

@@ -16,6 +16,7 @@
     "module": "esnext",
     // 这样就可以对 `this` 上的数据属性进行更严格的推断`
     "strict": true,
+    "jsx": "preserve",
     "moduleResolution": "node"
   }
 }