Skip to content

Lujing #1039

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 24 commits into from
Jan 8, 2020
Merged

Lujing #1039

Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
46 changes: 23 additions & 23 deletions src/v2/api/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -388,7 +388,7 @@ type: api

- **用法**:

在 render 函数中编译模板字符串。**只在独立构建时有效**
将一个模板字符串编译成render函数。**只在完整版时可用**。

``` js
var res = Vue.compile('<div><span>{{ msg }}</span></div>')
Expand Down Expand Up @@ -463,7 +463,7 @@ type: api

Vue 实例的数据对象。Vue 将会递归将 data 的属性转换为 getter/setter,从而让 data 的属性能够响应数据变化。**对象必须是纯粹的对象 (含有零个或多个的 key/value 对)**:浏览器 API 创建的原生对象,原型上的属性会被忽略。大概来说,data 应该只能是数据 - 不推荐观察拥有状态行为的对象。

一旦观察过,不需要再次在数据对象上添加响应式属性。因此推荐在创建实例之前,就声明所有的根级响应式属性。
一旦观察过,你就无法在根数据对象上添加响应式属性。因此推荐在创建实例之前,就声明所有的根级响应式属性。

实例创建之后,可以通过 `vm.$data` 访问原始数据对象。Vue 实例也代理了 data 对象上所有的属性,因此访问 `vm.a` 等价于访问 `vm.$data.a`。

Expand Down Expand Up @@ -806,7 +806,7 @@ type: api

- **详细**:

在实例创建完成后被立即调用。在这一步,实例已完成以下的配置:数据观测 (data observer),属性和方法的运算,watch/event 事件回调。然而,挂载阶段还没开始,`$el` 属性目前不可见
在实例创建完成后被立即调用。在这一步,实例已完成以下的配置:数据观测 (data observer),属性和方法的运算,watch/event 事件回调。然而,挂载阶段还没开始,`$el` 属性目前尚不可用

- **参考**:[生命周期图示](../guide/instance.html#生命周期图示)

Expand All @@ -828,9 +828,9 @@ type: api

- **详细**:

`el` 被新创建的 `vm.$el` 替换,并挂载到实例上去之后调用该钩子。如果 root 实例挂载了一个文档内元素,当 `mounted` 被调用时 `vm.$el` 也在文档内。
实例被挂载后调用,这时 `el` 被新创建的 `vm.$el` 替换了。 如果根实例挂载到了一个文档内的元素上,当`mounted`被调用时`vm.$el`也在文档内。

注意 `mounted` **不会**承诺所有的子组件也都一起被挂载。如果你希望等到整个视图都渲染完毕,可以用 [vm.$nextTick](#vm-nextTick) 替换掉 `mounted`
注意 `mounted` **不会**保证所有的子组件也都一起被挂载。如果你希望等到整个视图都渲染完毕,可以在 `mounted` 内部使用 [vm.$nextTick](#vm-nextTick):

``` js
mounted: function () {
Expand Down Expand Up @@ -867,7 +867,7 @@ type: api

当这个钩子被调用时,组件 DOM 已经更新,所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下,你应该避免在此期间更改状态。如果要相应状态改变,通常最好使用[计算属性](#computed)或 [watcher](#watch) 取而代之。

注意 `updated` **不会**承诺所有的子组件也都一起被重绘。如果你希望等到整个视图都重绘完毕,可以用 [vm.$nextTick](#vm-nextTick) 替换掉 `updated`
注意 `updated` **不会**保证所有的子组件也都一起被重绘。如果你希望等到整个视图都重绘完毕,可以在 `updated` 里使用 [vm.$nextTick](#vm-nextTick):

``` js
updated: function () {
Expand All @@ -888,7 +888,7 @@ type: api

- **详细**:

keep-alive 组件激活时调用
keep-alive 缓存的组件激活时调用

**该钩子在服务器端渲染期间不被调用。**

Expand All @@ -902,7 +902,7 @@ type: api

- **详细**:

keep-alive 组件停用时调用
keep-alive 缓存的组件停用时调用

**该钩子在服务器端渲染期间不被调用。**

Expand All @@ -928,7 +928,7 @@ type: api

- **详细**:

Vue 实例销毁后调用。调用后,Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁
实例销毁后调用。该钩子被调用后,对应 Vue 实例的所有指令都被解绑,所有的事件监听器被移除,所有的子实例也都被销毁

**该钩子在服务器端渲染期间不被调用。**

Expand All @@ -944,7 +944,7 @@ type: api

当捕获一个来自子孙组件的错误时被调用。此钩子会收到三个参数:错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。此钩子可以返回 `false` 以阻止该错误继续向上传播。

<p class="tip">你可以在此钩子中修改组件的状态。因此在模板或渲染函数中设置其它内容的短路条件非常重要,它可以防止当一个错误被捕获时该组件进入一个无限的渲染循环。</p>
<p class="tip">你可以在此钩子中修改组件的状态。因此在捕获错误时,在模板或渲染函数中有一个条件判断来绕过其它内容就很重要;不然该组件可能会进入一个无限的渲染循环。</p>

**错误传播规则**

Expand Down Expand Up @@ -1006,7 +1006,7 @@ type: api

- **详细**:

`mixins` 选项接受一个混入对象的数组。这些混入实例对象可以像正常的实例对象一样包含选项,他们将在 `Vue.extend()` 里最终选择使用相同的选项合并逻辑合并。举例:如果你的混入包含一个钩子而创建组件本身也有一个,两个函数将被调用
`mixins` 选项接收一个混入对象的数组。这些混入对象可以像正常的实例对象一样包含实例选项,这些选项将会被合并到最终的选项中,使用的是和 `Vue.extend()` 一样的选项合并逻辑。也就是说,如果你的混入包含一个 created 钩子,而创建组件本身也有一个,那么两个函数都会被调用

Mixin 钩子按照传入顺序依次调用,并在调用组件自身的钩子之前被调用。

Expand Down Expand Up @@ -1058,7 +1058,7 @@ type: api

- **详细**:

<p class="tip">`provide` 和 `inject` 主要为高阶插件/组件库提供用例。并不推荐直接用于应用程序代码中。</p>
<p class="tip">`provide` 和 `inject` 主要在开发高阶插件/组件库时使用。并不推荐用于普通应用程序代码中。</p>

这对选项需要一起使用,以允许一个祖先组件向其所有子孙后代注入一个依赖,不论组件层次有多深,并在起上下游关系成立的时间里始终生效。如果你熟悉 React,这与 React 的上下文特性很相似。

Expand Down Expand Up @@ -1222,7 +1222,7 @@ type: api

- **详细**:

使组件无状态 (没有 `data` ) 和无实例 (没有 `this` 上下文)。他们用一个简单的 `render` 函数返回虚拟节点使他们更容易渲染
使组件无状态 (没有 `data`) 和无实例 (没有 `this` 上下文)。他们用一个简单的 `render` 函数返回虚拟节点使它们渲染的代价更小

- **参考**:[函数式组件](../guide/render-function.html#函数式组件)

Expand Down Expand Up @@ -1522,7 +1522,7 @@ type: api

- **用法**:

观察 Vue 实例变化的一个表达式或计算属性函数。回调函数得到的参数为新值和旧值。表达式只接受监督的键路径。对于更复杂的表达式,用一个函数取代。
观察 Vue 实例上的一个表达式或者一个函数计算结果的变化。回调函数得到的参数为新值和旧值。表达式只接受监督的键路径。对于更复杂的表达式,用一个函数取代。

<p class="tip">注意:在变异 (不是替换) 对象或数组时,旧值将与新值相同,因为它们的引用指向同一个对象/数组。Vue 不会保留变异之前值的副本。</p>

Expand Down Expand Up @@ -1971,7 +1971,7 @@ type: api

- **用法**:

根据表达式的值的真假条件渲染元素。在切换时元素及它的数据绑定 / 组件被销毁并重建。如果元素是 `<template>` ,将提出它的内容作为条件块。
根据表达式的值的 [truthiness](https://developer.mozilla.org/zh-CN/docs/Glossary/Truthy) 来有条件地渲染元素。在切换时元素及它的数据绑定 / 组件被销毁并重建。如果元素是 `<template>` ,将提出它的内容作为条件块。

当条件变化时该指令触发过渡效果。

Expand Down Expand Up @@ -2051,7 +2051,7 @@ type: api
<div v-for="(val, name, index) in object"></div>
```

`v-for` 默认行为试着不改变整体,而是替换元素。迫使其重新排序的元素,你需要提供一个 `key` 的特殊属性
`v-for` 的默认行为会尝试原地修改元素而不是移动它们。要强制其重新排序元素,你需要用特殊属性 `key` 来提供一个排序提示

``` html
<div v-for="item in items" :key="item.id">
Expand Down Expand Up @@ -2168,7 +2168,7 @@ type: api
- **参数**:`attrOrProp (optional)`

- **修饰符**:
- `.prop` - 被用于绑定 DOM 属性 (property)。([差别在哪里?](https://stackoverflow.com/questions/6003819/properties-and-attributes-in-html#answer-6004028))
- `.prop` - 作为一个 DOM property 绑定而不是作为 attribute 绑定。([差别在哪里?](https://stackoverflow.com/questions/6003819/properties-and-attributes-in-html#answer-6004028))
- `.camel` - (2.1.0+) 将 kebab-case 特性名转换为 camelCase. (从 2.1.0 开始支持)
- `.sync` (2.3.0+) 语法糖,会扩展成一个更新父组件绑定值的 `v-on` 侦听器。

Expand Down Expand Up @@ -2386,7 +2386,7 @@ type: api

- **预期**:`number | string`

`key` 的特殊属性主要用在 Vue 的虚拟 DOM 算法,在新旧 nodes 对比时辨识 VNodes。如果不使用 key,Vue 会使用一种最大限度减少动态元素并且尽可能的尝试修复/再利用相同类型元素的算法。使用 key,它会基于 key 的变化重新排列元素顺序,并且会移除 key 不存在的元素。
`key` 的特殊属性主要用在 Vue 的虚拟 DOM 算法,在新旧 nodes 对比时辨识 VNodes。如果不使用 key,Vue 会使用一种最大限度减少动态元素并且尽可能的尝试就地修改/复用相同类型元素的算法。而使用 key,它会基于 key 的变化重新排列元素顺序,并且会移除 key 不存在的元素。

有相同父元素的子元素必须有**独特的 key**。重复的 key 会造成渲染错误。

Expand All @@ -2411,7 +2411,7 @@ type: api
</transition>
```

当 `text` 发生改变时,`<span>` 会随时被更新,因此会触发过渡。
当 `text` 发生改变时,`<span>` 总是会被替换而不是被修改,因此会触发过渡。

### ref

Expand Down Expand Up @@ -2521,7 +2521,7 @@ type: api
- `appear` - boolean,是否在初始渲染时使用过渡。默认为 `false`。
- `css` - boolean,是否使用 CSS 过渡类。默认为 `true`。如果设置为 `false`,将只通过组件事件触发注册的 JavaScript 钩子。
- `type` - string,指定过渡事件类型,侦听过渡何时结束。有效值为 `"transition"` 和 `"animation"`。默认 Vue.js 将自动检测出持续时间长的为过渡事件类型。
- `mode` - string,控制离开/进入的过渡时间序列。有效的模式有 `"out-in"` 和 `"in-out"`;默认同时生效
- `mode` - string,控制离开/进入过渡的时间序列。有效的模式有 `"out-in"` 和 `"in-out"`;默认同时进行
- `duration` - number | { `enter`: number, `leave`: number } 指定过渡的持续时间。默认情况下,Vue 会等待过渡所在根元素的第一个 `transitionend` 或 `animationend` 事件。
- `enter-class` - string
- `leave-class` - string
Expand Down Expand Up @@ -2549,7 +2549,7 @@ type: api

- **用法**:

`<transition>` 元素作为单个元素/组件的过渡效果。`<transition>` 只会把过渡效果应用到其包裹的内容上,而不会额外渲染 DOM 元素,也不会出现在检测过的组件层级中
`<transition>` 元素作为**单个**元素/组件的过渡效果。`<transition>` 只会把过渡效果应用到其包裹的内容上,而不会额外渲染 DOM 元素,也不会出现在可被检查的组件层级中

```html
<!-- 简单元素 -->
Expand Down Expand Up @@ -2600,7 +2600,7 @@ type: api

注意,每个 `<transition-group>` 的子节点必须有 **独立的 key** ,动画才能正常工作

`<transition-group>` 支持通过 CSS transform 过渡移动。当一个子节点被更新,从屏幕上的位置发生变化,它将会获取应用 CSS 移动类 (通过 `name` 属性或配置 `move-class` 属性自动生成)。如果 CSS `transform` 属性是“可过渡”属性,当应用移动类时,将会使用 [FLIP 技术](https://aerotwist.com/blog/flip-your-animations/) 使元素流畅地到达动画终点。
`<transition-group>` 支持通过 CSS transform 过渡移动。当一个子节点被更新,从屏幕上的位置发生变化,它会被应用一个移动中的 CSS (通过 `name` 属性或配置 `move-class` 属性自动生成)。如果 CSS `transform` 属性是“可过渡”属性,当应用移动类时,将会使用 [FLIP 技术](https://aerotwist.com/blog/flip-your-animations/) 使元素流畅地到达动画终点。

```html
<transition-group tag="ul" name="slide">
Expand All @@ -2621,7 +2621,7 @@ type: api

- **用法**:

`<keep-alive>` 包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。和 `<transition>` 相似,`<keep-alive>` 是一个抽象组件:它自身不会渲染一个 DOM 元素,也不会出现在父组件链中
`<keep-alive>` 包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。和 `<transition>` 相似,`<keep-alive>` 是一个抽象组件:它自身不会渲染一个 DOM 元素,也不会出现在组件的父组件链中
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

感觉这个改动没什么必要?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

我自己看文档的时候会不明白父组件链是什么意思

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

这句话主语就是 <keep-alive> (这个抽象组件) 吧


当组件在 `<keep-alive>` 内被切换,它的 `activated` 和 `deactivated` 这两个生命周期钩子函数将会被对应执行。

Expand Down
2 changes: 1 addition & 1 deletion src/v2/guide/components-slots.md
Original file line number Diff line number Diff line change
Expand Up @@ -255,7 +255,7 @@ Vue 实现了一套内容分发的 API,这套 API 的设计灵感源自 [Web C
</span>
```

绑定在 `<slot>` 元素上的特性被称为**插槽 prop**。现在在父级作用域中,我们可以给 `v-slot` 带一个值来定义我们提供的插槽 prop 的名字:
绑定在 `<slot>` 元素上的特性被称为**插槽 prop**。现在在父级作用域中,我们可以使用带值的 `v-slot` 来定义我们提供的插槽 prop 的名字:

``` html
<current-user>
Expand Down