diff --git a/src/api/application-api.md b/src/api/application-api.md index cf37602b4..aba1a06f3 100644 --- a/src/api/application-api.md +++ b/src/api/application-api.md @@ -14,16 +14,16 @@ const app = createApp({}) ## component -- **参数：** +- **参数**： - `{string} name` - `{Function | Object} [definition]` -- **用法：** +- **用法**： 注册或检索全局组件。注册还会使用给定的 `name` 参数自动设置组件的 `name`。 -- **示例：** +- **示例**： ```js import { createApp } from 'vue' @@ -43,11 +43,11 @@ const MyComponent = app.component('my-component', {}) ## config -- **用法：** +- **用法**： 包含应用程序配置的对象。 -- **示例：** +- **示例**： ```js import { createApp } from 'vue' @@ -60,16 +60,16 @@ app.config = {...} ## directive -- **参数：** +- **参数**： - `{string} name` - `{Function | Object} [definition]` -- **用法：** +- **用法**： 注册或检索全局指令。 -- **示例：** +- **示例**： ```js import { createApp } from 'vue' @@ -152,11 +152,11 @@ app.directive('focus', { ## mixin -- **参数：** +- **参数**： - `{Object} mixin` -- **用法：** +- **用法**： 在整个应用程序范围内应用 mixin，一旦注册，它们就可以在当前的 app 中任何组件模板内使用它。插件作者可以使用此方法将自定义行为注入组件。**不建议在应用程序代码中**。 @@ -164,16 +164,16 @@ app.directive('focus', { ## mount -- **参数：** +- **参数**： - `{Element | string} rootContainer` - `{boolean} isHydrate` -- **用法：** +- **用法**： 将应用程序实例的根组件挂载在提供的 DOM 元素上。 -- **示例：** +- **示例**： ```html @@ -194,15 +194,15 @@ app.mount('#my-app') ## unmount -- **参数：** +- **参数**： - `{Element | string} rootContainer` -- **用法：** +- **用法**： 在提供的 DOM 元素上卸载应用程序实例的根组件。 -- **示例：** +- **示例**： ```html @@ -223,11 +223,11 @@ setTimeout(() => app.unmount('#my-app'), 5000) ## use -- **参数：** +- **参数**： - `{Object | Function} plugin` -- **用法：** +- **用法**： 安装 Vue.js 插件。如果插件是一个对象，它必须暴露一个 `install` 方法。如果它本身是一个函数，它将被视为安装方法。将以 Vue 作为参数调用 install 方法。 diff --git a/src/api/basic-reactivity.md b/src/api/basic-reactivity.md index ac09d950f..ac3b6f1d2 100644 --- a/src/api/basic-reactivity.md +++ b/src/api/basic-reactivity.md @@ -12,7 +12,7 @@ const obj = reactive({ count: 0 }) 响应式转换是“深”的——它影响所有嵌套 property。在基于 [ES2015 Proxy](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy) 的实现中，返回的代理是**不**等于原始对象。建议只使用响应式代理，避免依赖原始对象。 -**类型声明：** +**类型声明**： ```ts function reactive(target: T): UnwrapNestedRefs diff --git a/src/api/built-in-components.md b/src/api/built-in-components.md index cc0c82fe3..9bb148558 100644 --- a/src/api/built-in-components.md +++ b/src/api/built-in-components.md @@ -2,11 +2,11 @@ ## component -- **Props：** +- **Props**： - `is` - `string | ComponentDefinition | ComponentConstructor` -- **用法：** +- **用法**： 渲染一个“元组件”为动态组件。依 `is` 的值，来决定哪个组件被渲染。 @@ -18,11 +18,11 @@ ``` -- **参考：** [动态组件](../guide/component-dynamic-async.html) +- **参考**：[动态组件](../guide/component-dynamic-async.html) ## transition -- **Props：** +- **Props**： - `name` - `string` 用于自动生成 CSS 过渡类名。例如：`name: 'fade'` 将自动拓展为 `.fade-enter`，`.fade-enter-active` 等。 - `appear` - `boolean`，是否在初始渲染时使用过渡。默认为 `false`。 @@ -41,7 +41,7 @@ - `leave-active-class` - `string` - `appear-active-class` - `string` -- **事件：** +- **事件**： - `before-enter` - `before-leave` @@ -55,7 +55,7 @@ - `leave-cancelled` (仅 `v-show`) - `appear-cancelled` -- **用法：** +- **用法**： `` 元素作为**单个**元素/组件的过渡效果。`` 只会把过渡效果应用到其包裹的内容上，而不会额外渲染 DOM 元素，也不会出现在可被检查的组件层级中。 @@ -92,21 +92,21 @@ app.mount('#transition-demo') ``` -- **参考：** [进入 & 离开过渡](/guide/transitions-enterleave.html#transitioning-single-elements-components) +- **参考**：[进入 & 离开过渡](/guide/transitions-enterleave.html#transitioning-single-elements-components) ## transition-group -- **Props：** +- **Props**： - `tag` - `string`，默认为 `span`。 - `move-class` - 覆盖移动过渡期间应用的 CSS 类。 - 除了 `mode`，其他 attribute 和 `` 相同。 -- **事件：** +- **事件**： - 事件和 `` 相同。 -- **用法：** +- **用法**： `` 元素作为**多个**元素/组件的过渡效果。`` 渲染一个真实的 DOM 元素。默认渲染 ``，可以通过 `tag` attribute 配置哪个元素应该被渲染。 @@ -122,17 +122,17 @@ ``` -- **参考：** [列表过渡](/guide/transitions-list.html) +- **参考**：[列表过渡](/guide/transitions-list.html) ## keep-alive -- **Props：** +- **Props**： - `include` - `string | RegExp | Array`。只有名称匹配的组件会被缓存。 - `exclude` - `string | RegExp | Array`。任何名称匹配的组件都不会被缓存。 - `max` - `number | string`。最多可以缓存多少组件实例。 -- **用法：** +- **用法**： `` 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和 `` 相似，`` 是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在组件的父组件链中。 @@ -200,25 +200,25 @@ `` 不会在函数式组件中正常工作，因为它们没有缓存实例。 ::: -- **参考：** [动态组件 - keep-alive](../guide/component-dynamic-async.html#dynamic-components-with-keep-alive) +- **参考**：[动态组件 - keep-alive](../guide/component-dynamic-async.html#dynamic-components-with-keep-alive) ## slot -- **Props：** +- **Props**： - `name` - `string`，用于具名插槽 -- **用法：** +- **用法**： `` 元素作为组件模板之中的内容分发插槽。`` 元素自身将被替换。 详细用法，请参考下面教程的链接。 -- **参考：** [通过插槽分发内容](../guide/component-basics.html#content-distribution-with-slots) +- **参考**：[通过插槽分发内容](../guide/component-basics.html#content-distribution-with-slots) ## teleport -- **Props：** +- **Props**： - `to` - `string`。需要 prop，必须是有效的查询选择器或 HTMLElement (如果在浏览器环境中使用)。指定将在其中移动 `` 内容的目标元素 @@ -243,4 +243,4 @@ 请注意，这将移动实际的 DOM 节点，而不是被销毁和重新创建，并且它还将保持任何组件实例的活动状态。所有有状态的 HTML 元素 (即播放的视频) 都将保持其状态。 -- **参考：** [Teleport 组件](../guide/teleport.html#teleport) +- **参考**：[Teleport 组件](../guide/teleport.html#teleport) diff --git a/src/api/composition-api.md b/src/api/composition-api.md index d6f6570c9..1f9dfe0ad 100644 --- a/src/api/composition-api.md +++ b/src/api/composition-api.md @@ -6,7 +6,7 @@ 一个组件选项，在创建组件**之前**执行，一旦 `props` 被解析，并作为组合 API 的入口点 -- **入参：** +- **入参**： - `{Data} props` - `{SetupContext} context` @@ -31,7 +31,7 @@ function setup(props: Data, context: SetupContext): Data 若要获取传递给 `setup()` 的参数的类型推断，请使用 [defineComponent](global-api.html#definecomponent) 是需要的。 ::: -- **示例：** +- **示例**： 使用模板： diff --git a/src/api/computed-watch-api.md b/src/api/computed-watch-api.md index 1450fe1c9..7e73ea72e 100644 --- a/src/api/computed-watch-api.md +++ b/src/api/computed-watch-api.md @@ -30,7 +30,7 @@ plusOne.value = 1 console.log(count.value) // 0 ``` -**类型声明：** +**类型声明**： ```ts // read-only @@ -56,7 +56,7 @@ setTimeout(() => { }, 100) ``` -**类型声明：** +**类型声明**： ```ts function watchEffect( @@ -130,7 +130,7 @@ watch([fooRef, barRef], ([foo, bar], [prevFoo, prevBar]) => { `watch` 与 [`watchEffect`](#watcheffect) 在[手动停止](stopping-the-watcher)，[副作用无效](side-effect-invalidation) (将 `onInvalidate` 作为第三个参数传递给回调)，[flush timing](#effect-flush-timing) 和 [debugging](#watcher-debugging)。 -**类型声明：** +**类型声明**： ```ts // 侦听单一源 diff --git a/src/api/global-api.md b/src/api/global-api.md index c927b6f03..cdc53c91f 100644 --- a/src/api/global-api.md +++ b/src/api/global-api.md @@ -76,25 +76,25 @@ render() { #### type -- **类型：**`String | Object | Function | null` +- **类型**：`String | Object | Function | null` -- **详细：** +- **详细**： 一个 HTML 标签名，一个组件，一个异步组件或 null，使用 null 将渲染注释。此参数是必需的。 #### props -- **类型：**`Object` +- **类型**：`Object` -- **详细：** +- **详细**： 与我们将在模板中使用的 attributes、prop 和事件相对应的对象。可选。 #### children -- **类型：**`String | Array | Object` +- **类型**：`String | Array | Object` -- **详细：** +- **详细**： 子虚拟 Node，使用 `h()` 生成，或者使用字符串来获取“文本节点”或带有插槽的对象。可选 @@ -224,9 +224,9 @@ render() { #### component -- **类型：**`String` +- **类型**：`String` -- **详细：** +- **详细**： 载的组件的名称。 ## resolveDynamicComponent @@ -254,9 +254,9 @@ render () { #### component -- **类型：**`String | Object (组件的选项对象)` +- **类型**：`String | Object (组件的选项对象)` -- **详细：** +- **详细**： 有关详细信息，请参阅[动态组件](../guide/component-dynamic-async.html)上的文档。 @@ -288,9 +288,9 @@ render () { #### name -- **类型：**`String` +- **类型**：`String` -- **详细：** +- **详细**： 已加载指令的名称。 @@ -319,17 +319,17 @@ return withDirectives(h('div'), [ #### vnode -- **类型：**`vnode` +- **类型**：`vnode` -- **详细：** +- **详细**： 一个虚拟 node，通常使用 `h()` 创建。 #### directives -- **类型：**`Array` +- **类型**：`Array` -- **详细：** +- **详细**： 一个指令数组。 @@ -398,17 +398,17 @@ const { render, createApp } = createRenderer({ #### HostNode -- **类型：**`Node` +- **类型**：`Node` -- **详细：** +- **详细**： 宿主环境中的节点。 #### HostElement -- **类型：**`Element` +- **类型**：`Element` -- **详细：** +- **详细**： 宿主环境中的元素 diff --git a/src/api/instance-methods.md b/src/api/instance-methods.md index 7c5f7b915..59051ba8a 100644 --- a/src/api/instance-methods.md +++ b/src/api/instance-methods.md @@ -2,7 +2,7 @@ ## $watch -- **参数：** +- **参数**： - `{string | Function} source` - `{Function | Object} callback` @@ -10,13 +10,13 @@ - `{boolean} deep` - `{boolean} immediate` -- **返回：**`{Function} unwatch` +- **返回**：`{Function} unwatch` -- **用法：** +- **用法**： 侦听组件实例上的响应式 property 或函数计算结果的变化。回调函数得到的参数为新值和旧值。我们只能将顶层的 `data`、`prop` 或 `computed` property 名作为字符串传递。对于更复杂的表达式，用一个函数取代。 -- **示例：** +- **示例**： ```js const app = Vue.createApp({ @@ -174,14 +174,14 @@ ## $emit -- **参数：** +- **参数**： - `{string} eventName` - `[...args]` 触发当前实例上的事件。附加参数都会传给监听器回调。 -- **示例：** +- **示例**： 只配合一个事件名使用 $emit： @@ -251,21 +251,21 @@ ## $forceUpdate -- **用法：** +- **用法**： 迫使组件实例重新渲染。注意它仅仅影响实例本身和插入插槽内容的子组件，而不是所有子组件。 ## $nextTick -- **参数：** +- **参数**： - `{Function} [callback]` -- **用法：** +- **用法**： 将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它，然后等待 DOM 更新。它跟全局方法 `nextTick` 一样，不同的是回调的 `this` 自动绑定到调用它的实例上。 -- **示例：** +- **示例**： ```js Vue.createApp({ diff --git a/src/api/instance-properties.md b/src/api/instance-properties.md index 0261bb10c..222ba4c6c 100644 --- a/src/api/instance-properties.md +++ b/src/api/instance-properties.md @@ -2,9 +2,9 @@ ## $data -- **类型：**`Object` +- **类型**：`Object` -- **详细：** +- **详细**： 组件实例观察的数据对象。组件实例代理了对其 data 对象 property 的访问。 @@ -12,29 +12,29 @@ ## $props -- **类型：**`Object` +- **类型**：`Object` -- **详细：** +- **详细**： 当前组件接收到的 props 对象。组件实例代理了对其 props 对象 property 的访问。 ## $el -- **类型：**`any` +- **类型**：`any` - **仅可读** -- **详细：** +- **详细**： 组件实例使用的根 DOM 元素。 ## $options -- **类型：**`Object` +- **类型**：`Object` - **仅可读** -- **详细：** +- **详细**： 用于当前组件实例的初始化选项。需要在选项中包含自定义 property 时会有用处： @@ -49,37 +49,37 @@ ## $parent -- **类型：**`Vue instance` +- **类型**：`Vue instance` - **仅可读** -- **详细：** +- **详细**： 父实例，如果当前实例有的话。 ## $root -- **类型：**`Vue instance` +- **类型**：`Vue instance` - **仅可读** -- **详细：** +- **详细**： 当前组件树的根组件实例。如果当前实例没有父实例，此实例将会是其自己。 ## $slots -- **类型：**`{ [name: string]: (...args: any[]) => Array | undefined }` +- **类型**：`{ [name: string]: (...args: any[]) => Array | undefined }` - **仅可读** -- **详细：** +- **详细**： 用来访问被[插槽分发](../guide/component-basics.html#content-distribution-with-slots)的内容。每个[具名插槽](../guide/component-slots.html#named-slots)有其相应的 property (例如：`v-slot:foo` 中的内容将会在 `this.$slots.foo` 中被找到)。`default` property 包括了所有没有被包含在具名插槽中的节点，或 `v-slot:default` 的内容。 在使用[渲染函数](../guide/render-function.html)书写一个组件时，访问 `this.$slots` 最有帮助。 -- **示例：** +- **示例**： ```html @@ -120,11 +120,11 @@ ## $refs -- **类型：**`Object` +- **类型**：`Object` - **仅可读** -- **详细：** +- **详细**： 一个对象，持有注册过 [`ref` attribute](../guide/component-template-refs.html) 的所有 DOM 元素和组件实例。 @@ -134,11 +134,11 @@ ## $attrs -- **类型：**`Object` +- **类型**：`Object` - **仅可读** -- **详细：** +- **详细**： 包含了父作用域中不作为组件 [props](./options-data.html#props) 或[自定义事件](./options-data.html#emits)。当一个组件没有声明任何 prop 时，这里会包含所有父作用域的绑定，并且可以通过 `v-bind="$attrs"` 传入内部组件——在创建高阶的组件时非常有用。 diff --git a/src/api/options-assets.md b/src/api/options-assets.md index 3f37ab751..9328460ac 100644 --- a/src/api/options-assets.md +++ b/src/api/options-assets.md @@ -2,9 +2,9 @@ ## directives -- **类型：**`Object` +- **类型**：`Object` -- **详细：** +- **详细**： 包含组件实例可用指令的哈希表。 @@ -12,9 +12,9 @@ ## components -- **类型：**`Object` +- **类型**：`Object` -- **详细：** +- **详细**： 包含组件实例可用组件的哈希表。 diff --git a/src/api/options-composition.md b/src/api/options-composition.md index e4b0e2b94..be6889458 100644 --- a/src/api/options-composition.md +++ b/src/api/options-composition.md @@ -2,15 +2,15 @@ ## mixins -- **类型：**`Array` +- **类型**：`Array` -- **详细：** +- **详细**： `mixins` 选项接收一个混入对象的数组。这些混入对象可以像正常的实例对象一样包含实例选项，这些选项将会被合并到最终的选项中，使用特定的选项合并逻辑。例如，如果 mixin 包含一个 `created` 钩子，而创建组件本身也有一个，那么两个函数都会被调用。 Mixin 钩子按照传入顺序依次调用，并在调用组件自身的钩子之前被调用。 -- **示例：** +- **示例**： ```js const mixin = { @@ -34,15 +34,15 @@ ## extends -- **类型：**`Object | Function` +- **类型**：`Object | Function` -- **详细：** +- **详细**： 允许声明扩展另一个组件 (可以是一个简单的选项对象或构造函数)。这主要是为了便于扩展单文件组件。 这和 `mixins` 类似。 -- **示例：** +- **示例**： ```js const CompA = { ... } @@ -56,12 +56,12 @@ ## provide / inject -- **类型：** +- **类型**： - - **provide：**`Object | () => Object` - - **inject：**`Array | { [key: string]: string | Symbol | Object }` + - **provide**：`Object | () => Object` + - **inject**：`Array | { [key: string]: string | Symbol | Object }` -- **详细：** +- **详细**： 这对选项需要一起使用，以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效。如果你熟悉 React，这与 React 的 `context` 特性很相似。 @@ -78,7 +78,7 @@ > 提示：提示：`provide` 和 `inject` 绑定并不是可响应的。这是刻意为之的。然而，如果你传入了一个可监听的对象，那么其对象的 property 还是可响应的。 -- **示例：** +- **示例**： ```js // 父级组件提供 'foo' @@ -186,7 +186,7 @@ ## setup -- **类型：**`Function` +- **类型**：`Function` `setup` 函数是一个新的组件选项。它作为在组件内部使用组合 API 的入口点。 diff --git a/src/api/options-data.md b/src/api/options-data.md index 31270a6ea..2298e532b 100644 --- a/src/api/options-data.md +++ b/src/api/options-data.md @@ -2,9 +2,9 @@ ## data -- **类型：**`Function` +- **类型**：`Function` -- **详细：** +- **详细**： 返回组件实例的 data 对象的函数。在 `data` 中，我们不建议观察具有自身状态行为的对象，如浏览器 API 对象和原型 property。一个好主意是这里只有一个表示组件 data 的普通对象。 @@ -14,7 +14,7 @@ 以 `_` 或 `$` 开头的 property 不会被组件实例代理，因为它们可能和 Vue 内置的 property、API 方法冲突。你可以使用例如 `vm.$data._property` 的方式访问这些 property。 -- **示例：** +- **示例**： ```js // 直接创建一个实例 @@ -40,9 +40,9 @@ ## props -- **类型：**`Array | Object` +- **类型**：`Array | Object` -- **详细：** +- **详细**： props 可以是数组或对象，用于接收来自父组件的数据。props 可以是简单的数组，或者使用对象作为替代，对象允许配置高阶选项，如类型检测、自定义验证和设置默认值。 @@ -56,7 +56,7 @@ - `validator`：`Function` 自定义验证函数会将该 prop 的值作为唯一的参数代入。在非生产环境下，如果该函数返回一个 falsy 的值 (也就是验证失败)，一个控制台警告将会被抛出。你可以在[这里](../guide/component-props.html#prop-validation)查阅更多 prop 验证的相关信息。 -- **示例：** +- **示例**： ```js const app = Vue.createApp({}) @@ -88,9 +88,9 @@ ## computed -- **类型：**`{ [key: string]: Function | { get: Function, set: Function } }` +- **类型**：`{ [key: string]: Function | { get: Function, set: Function } }` -- **详细：** +- **详细**： 计算属性将被混入到组件实例中。所有 getter 和 setter 的 `this` 上下文自动地绑定为组件实例。 @@ -104,7 +104,7 @@ 计算属性的结果会被缓存，除非依赖的响应式 property 变化才会重新计算。注意，如果某个依赖 (比如非响应式 property) 在该实例范畴之外，则计算属性是不会被更新的。 -- **示例：** +- **示例**： ```js const app = Vue.createApp({ @@ -139,9 +139,9 @@ ## methods -- **类型：**`{ [key: string]: Function }` +- **类型**：`{ [key: string]: Function }` -- **详细：** +- **详细**： methods 将被混入到组件实例中。可以直接通过 VM 实例访问这些方法，或者在指令表达式中使用。方法中的 `this` 自动绑定为组件实例。 @@ -149,7 +149,7 @@ 注意，**不应该使用箭头函数来定义 method 函数** (例如 plus：() => this.a++)。理由是箭头函数绑定了父级作用域的上下文，所以 `this` 将不会按照期望指向组件实例，`this.a` 将是 undefined。 ::: -- **示例：** +- **示例**： ```js const app = Vue.createApp({ @@ -173,13 +173,13 @@ ## watch -- **类型：**`{ [key: string]: string | Function | Object | Array}` +- **类型**：`{ [key: string]: string | Function | Object | Array}` -- **详细：** +- **详细**： 一个对象，键是需要观察的表达式，值是对应回调函数。值也可以是方法名，或者包含选项的对象。Vue 实例将会在实例化时调用 `$watch()`，遍历 watch 对象的每一个 property。 -- **示例：** +- **示例**： ```js const app = Vue.createApp({ @@ -252,16 +252,16 @@ ## emits -- **类型：**`Array | Object` +- **类型**：`Array | Object` -- **详细：** +- **详细**： emits 可以是数组或对象，从组件触发自定义事件，emits 可以是简单的数组，或者对象作为替代，允许配置和事件验证。 在对象语法中，每个 property 的值可以为 `null` 或验证函数。验证函数将接收传递给 `$emit` 调用的其他参数。如果 `this.$emit('foo',1)` 被调用，`foo` 的相应验证函数将接收参数 `1`。验证函数应返回布尔值，以表示事件参数是否有效。 -- **用法：** +- **用法**： ```js const app = Vue.createApp({}) diff --git a/src/api/options-dom.md b/src/api/options-dom.md index 8980337f2..c3ae0145b 100644 --- a/src/api/options-dom.md +++ b/src/api/options-dom.md @@ -2,9 +2,9 @@ ## template -- **类型：**`string` +- **类型**：`string` -- **详细：** +- **详细**： 一个字符串模板作为 component 实例的标识使用。模板将会**替换**挂载的元素。挂载元素的内容都将被忽略，除非模板的内容有分发插槽。 @@ -24,13 +24,13 @@ ## render -- **类型：**`Function` +- **类型**：`Function` -- **详细：** +- **详细**： 字符串模板的另一种选择，允许你充分利用 JavaScript 的编程功能。 -- **用法：** +- **用法**： ```html
diff --git a/src/api/options-lifecycle-hooks.md b/src/api/options-lifecycle-hooks.md index 6014a4c47..b5f5a9d5b 100644 --- a/src/api/options-lifecycle-hooks.md +++ b/src/api/options-lifecycle-hooks.md @@ -6,9 +6,9 @@ ## beforeCreate -- **类型：**`Function` +- **类型**：`Function` -- **详细：** +- **详细**： 在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。 @@ -16,9 +16,9 @@ ## created -- **类型：**`Function` +- **类型**：`Function` -- **详细：** +- **详细**： 在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测 (data observer)，property 和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，`$el` property 目前尚不可用。 @@ -26,21 +26,21 @@ ## beforeMount -- **类型：**`Function` +- **类型**：`Function` -- **详细：** +- **详细**： 在挂载开始之前被调用：相关的 `render` 函数首次被调用。 - **该钩子在服务器端渲染期间不被调用。** + **该钩子在服务器端渲染期间不被调用**。 - **参考**[生命周期图示](../guide/instance.html#lifecycle-diagram) ## mounted -- **类型：**`Function` +- **类型**：`Function` -- **详细：** +- **详细**： 实例被挂载后调用，这时 `Vue.createApp({}).mount()` 被新创建的 `vm.$el` 替换了。如果根实例挂载到了一个文档内的元素上，当 mounted 被调用时 `vm.$el` 也在文档内。 @@ -54,27 +54,27 @@ } ``` - **该钩子在服务器端渲染期间不被调用。** + **该钩子在服务器端渲染期间不被调用**。 - **参考**[生命周期图示](../guide/instance.html#lifecycle-diagram) ## beforeUpdate -- **类型：**`Function` +- **类型**：`Function` -- **详细：** +- **详细**： 数据更新时调用，发生在虚拟 DOM 打补丁之前。这里适合在更新之前访问现有的 DOM，比如手动移除已添加的事件监听器。 - **该钩子在服务器端渲染期间不被调用，因为只有初次渲染会在服务端进行。** + **该钩子在服务器端渲染期间不被调用，因为只有初次渲染会在服务端进行**。 - **参考**[生命周期图示](../guide/instance.html#lifecycle-diagram) ## updated -- **类型：**`Function` +- **类型**：`Function` -- **详细：** +- **详细**： 由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。 @@ -90,65 +90,65 @@ } ``` - **该钩子在服务器端渲染期间不被调用。** + **该钩子在服务器端渲染期间不被调用**。 - **参考**[生命周期图示](../guide/instance.html#lifecycle-diagram) ## activated -- **类型：**`Function` +- **类型**：`Function` -- **详细：** +- **详细**： 被 keep-alive 缓存的组件激活时调用。 - **该钩子在服务器端渲染期间不被调用。** + **该钩子在服务器端渲染期间不被调用**。 - **参考** - [动态组件 - keep-alive](../guide/component-basics.html#keep-alive) ## deactivated -- **类型：**`Function` +- **类型**：`Function` -- **详细：** +- **详细**： 被 keep-alive 缓存的组件停用时调用。 - **该钩子在服务器端渲染期间不被调用。** + **该钩子在服务器端渲染期间不被调用**。 - **参考** - [动态组件 - keep-alive](../guide/component-basics.html#keep-alive) ## beforeUnmount -- **类型：**`Function` +- **类型**：`Function` -- **详细：** +- **详细**： 在卸载组件实例之前调用。在这个阶段，实例仍然是完全正常的。 - **该钩子在服务器端渲染期间不被调用。** + **该钩子在服务器端渲染期间不被调用**。 - **参考**[生命周期图示](../guide/instance.html#lifecycle-diagram) ## unmounted -- **类型：**`Function` +- **类型**：`Function` -- **详细：** +- **详细**： 卸载组件实例后调用。调用此钩子时，组件实例的所有指令都被解除绑定，所有事件侦听器都被移除，所有子组件实例被卸载。 - **该钩子在服务器端渲染期间不被调用。** + **该钩子在服务器端渲染期间不被调用**。 - **参考**[生命周期图示](../guide/instance.html#lifecycle-diagram) ## errorCaptured -- **类型：**`(err: Error, instance: Component, info: string) => ?boolean` +- **类型**：`(err: Error, instance: Component, info: string) => ?boolean` -- **详细：** +- **详细**： 当捕获一个来自子孙组件的错误时被调用。此钩子会收到三个参数：错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。此钩子可以返回 `false` 以阻止该错误继续向上传播。 @@ -168,13 +168,13 @@ ## renderTracked -- **类型：**`(e: DebuggerEvent) => void` +- **类型**：`(e: DebuggerEvent) => void` -- **详细：** +- **详细**： 跟踪虚拟 DOM 重新渲染时调用。钩子接收 `debugger event` 作为参数。此事件告诉你哪个操作跟踪了组件以及该操作的目标对象和键。 -- **用法：** +- **用法**： ```html
@@ -214,13 +214,13 @@ ## renderTriggered -- **类型：**`(e: DebuggerEvent) => void` +- **类型**：`(e: DebuggerEvent) => void` -- **详细：** +- **详细**： 当虚拟 DOM 重新渲染为 triggered.Similarly 为[`renderTracked`](#rendertracked)，接收 `debugger event` 作为参数。此事件告诉你是什么操作触发了重新渲染，以及该操作的目标对象和键。 -- **用法：** +- **用法**： ```html
diff --git a/src/api/options-misc.md b/src/api/options-misc.md index bcf458f78..b9241e043 100644 --- a/src/api/options-misc.md +++ b/src/api/options-misc.md @@ -2,11 +2,11 @@ ## name -- **类型：**`string` +- **类型**：`string` -- **限制：**只有作为组件选项时起作用。 +- **限制**：只有作为组件选项时起作用。 -- **详细：** +- **详细**： 允许组件模板递归地调用自身。注意，组件在全局用 `Vue.createApp({}).component({})` 注册时，全局 ID 自动作为组件的 name。 @@ -14,17 +14,17 @@ ## inheritAttrs -- **类型：**`boolean` +- **类型**：`boolean` -- **默认：**`true` +- **默认**：`true` -- **详细：** +- **详细**： 默认情况下父作用域的不被认作 props 的 attribute 绑定 (attribute bindings) 将会“回退”且作为普通的 HTML attribute 应用在子组件的根元素上。当撰写包裹一个目标元素或另一个组件的组件时，这可能不会总是符合预期行为。通过设置 `inheritAttrs` 到 `false`，这些默认行为将会被去掉。而通过实例 property `$attrs` 可以让这些 attribute 生效，且可以通过 `v-bind` 显性的绑定到非根元素上。 注意：这个选项**不**影响 `class` 和 `style` 绑定。 -- **用法：** +- **用法**： ```js app.component('base-input', { diff --git a/src/api/refs-api.md b/src/api/refs-api.md index cd95df94c..92d716777 100644 --- a/src/api/refs-api.md +++ b/src/api/refs-api.md @@ -6,7 +6,7 @@ 接受一个内部值并返回一个响应式且可变的 ref 对象。ref 对象具有指向内部值的单个 property `.value`。 -**示例：** +**示例**： ```js const count = ref(0) @@ -18,7 +18,7 @@ console.log(count.value) // 1 如果将对象分配为 ref 值，则可以通过 [reactive](./basic-reactivity.html#reactive) 方法使该对象具有高度的响应式。 -**类型声明：** +**类型声明**： ```ts interface Ref { @@ -183,7 +183,7 @@ Checks if a value is a ref object。 } ``` -**Typing：** +**Typing**： ```ts function customRef(factory: CustomRefFactory): Ref diff --git a/src/api/special-attributes.md b/src/api/special-attributes.md index 604a24bb3..ac01e8783 100644 --- a/src/api/special-attributes.md +++ b/src/api/special-attributes.md @@ -2,7 +2,7 @@ ## key -- **预期：**`number | string` +- **预期**：`number | string` `key` 的特殊 attribute 主要用在 Vue 的虚拟 DOM 算法，在新旧 nodes 对比时辨识 VNodes。如果不使用 key，Vue 会使用一种最大限度减少动态元素并且尽可能的尝试就地修改/复用相同类型元素的算法。而使用 key 时，它会基于 key 的变化重新排列元素顺序，并且会移除/销毁 key 不存在的元素。 @@ -33,7 +33,7 @@ ## ref -- **预期：**`string | Function` +- **预期**：`string | Function` `ref` 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 `$refs` 对象上。如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例： @@ -56,7 +56,7 @@ ## is -- **预期：**`string | Object (component’s options object)` +- **预期**：`string | Object (component’s options object)` 使用[动态组件](../guide/component-dynamic-async.html)。 diff --git a/src/guide/composition-api-introduction.md b/src/guide/composition-api-introduction.md index 01bb8c88b..a80df5f8b 100644 --- a/src/guide/composition-api-introduction.md +++ b/src/guide/composition-api-introduction.md @@ -298,7 +298,7 @@ export default { 有关 `watch` 的详细信息，请参阅我们的[深入指南](composition-api-introduction.html)。 -**现在我们将其应用到我们的示例中：** +**现在我们将其应用到我们的示例中**： ```js // src/components/UserRepositories.vue `setup` function @@ -434,7 +434,7 @@ export default function useRepositoryNameSearch(repositories) { } ``` -**现在在单独的文件中有了这两个功能，我们就可以开始在组件中使用它们了。以下是如何做到这一点：** +**现在在单独的文件中有了这两个功能，我们就可以开始在组件中使用它们了。以下是如何做到这一点**： ```js // src/components/UserRepositories.vue diff --git a/src/guide/contributing/writing-guide.md b/src/guide/contributing/writing-guide.md index 647b6c34b..5ad344e24 100644 --- a/src/guide/contributing/writing-guide.md +++ b/src/guide/contributing/writing-guide.md @@ -79,7 +79,7 @@ - **在发布之前，请仅等到某事为“好”为止**。社区将帮助你将其推向更深的链。 - **收到反馈时，尽量不要防御**我们的写作对我们来说可能是非常私人的，但是如果我们对帮助我们做得更好的人感到不满，他们要么停止提供反馈，要么开始限制他们提供的反馈种类。 - **在向他人展示之前，请先阅读自己的作品**。如果你显示某人的拼写/语法错误很多，你将获得有关拼写语法/错误的反馈，而不是获得有关写作是否达到目标的更有价值的注释。 -- **当你要求人们提供反馈时，请告诉审阅者以下内容：** +- **当你要求人们提供反馈时，请告诉审阅者以下内容**： - **你正在尝试做** - **你的恐惧是** - **你想要达到的平衡** diff --git a/src/guide/migration/custom-elements-interop.md b/src/guide/migration/custom-elements-interop.md index 9fbc48199..b36ef1eae 100644 --- a/src/guide/migration/custom-elements-interop.md +++ b/src/guide/migration/custom-elements-interop.md @@ -7,9 +7,9 @@ badges: ## 概览 -- **BREAKING：**自定义元素白名单现在在模板编译期间执行，应该通过编译器选项而不是运行时配置来配置。 -- **BREAKING：**特定 `is` prop 用法仅限于保留的 `` 标记 -- **NEW：**有了新的 `v-is` 指令来支持 2.x 用例，其中在原生元素上使用了 `v-is` 来处理原生 HTML 解析限制。 +- **重大变更**：自定义元素白名单现在在模板编译期间执行，应该通过编译器选项而不是运行时配置来配置。 +- **重大变更**：特定 `is` prop 用法仅限于保留的 `` 标记 +- **新**：有了新的 `v-is` 指令来支持 2.x 用例，其中在原生元素上使用了 `v-is` 来处理原生 HTML 解析限制。 ## 自主定制元素 diff --git a/src/guide/migration/functional-components.md b/src/guide/migration/functional-components.md index 4568ff789..ee0203fdf 100644 --- a/src/guide/migration/functional-components.md +++ b/src/guide/migration/functional-components.md @@ -11,8 +11,8 @@ badges: - 在 3.x 中，功能性组件 2.x 的性能提升可以忽略不计，因此我们建议只使用有状态的组件 - 功能组件只能使用接收 `props` 和 `context` 的普通函数创建 (即：`slots`，`attrs`，`emit`)。 -- **重大变更：**`functional` attribute 在单文件组件 (SFC) `