[zh-cn] Sync en updates #db54537 -> #c39ba70 (#993)

* [zh-cn] sync recent updates from #db54537 to #c39ba70

* [zh-cn] synced recent updates (#db54537 to #c39ba70)

* [zh-cn] fixed some details

Author: Jinjiang

docs/zh-cn/SUMMARY.md

@@ -26,6 +26,8 @@
   - [cssSourceMap](options.md#csssourcemap)
   - [esModule](options.md#esmodule)
   - [preserveWhitespace](options.md#preservewhitespace)
+  - [compilerModules](options.md#compilermodules)
+  - [compilerDirectives](options.md#compilerdirectives)
   - [transformToRequire](options.md#transformtorequire)
   - [buble](options.md#buble)
   - [extractCSS](options.md#extractcss)

docs/zh-cn/features/hot-reload.md

@@ -4,4 +4,18 @@
 
 ![hot-reload](http://blog.evanyou.me/images/vue-hot.gif)
 
+## 状态保留规则
+
+- 当编辑一个组件的 `<template>` 时，这个组件实例将就地重新渲染，并保留当前所有的私有状态。能够做到这一点是因为模板被编译成了新的无副作用的渲染函数。
+
+- 当编辑一个组件的 `<script>` 时，这个组件实例将就地销毁并重新创建。(应用中其它组件的状态将会被保留) 是因为 `<script>` 可能包含带有副作用的生命周期钩子，所以将“重新加载”替换为重新渲染是必须的，这样做可以确保组件行为的一致性。这也意味着，如果你的组件带有全局副作用，则整个页面将会被重新加载。
+
+- `<style>` 会通过 `vue-style-loader` 自行热重载，所以它不会影响应用的状态。
+
+## 用法
+
 当使用脚手架工具 `vue-cli` 时，热重载是开箱即用的。
+
+当手动设置你的工程时，热重载会在你启动 `webpack-dev-server --hot` 服务时自动开启。
+
+高阶用户可能希望移步 `vue-loader` 内部使用的 [vue-hot-reload-api](https://github.com/vuejs/vue-hot-reload-api) 继续查阅。

docs/zh-cn/features/scoped-css.md

@@ -1,4 +1,4 @@
-# CSS 作用域
+# 有作用域的 CSS
 
 当 `<style>` 标签有 `scoped` 属性时，它的 CSS 只作用于当前组件中的元素。这类似于 Shadow DOM 中的样式封装。它有一些注意事项，但不需要任何 polyfill。它通过使用 PostCSS 来实现以下转换：
 
@@ -28,40 +28,50 @@
 </template>
 ```
 
-#### 注意
+## 注意
 
-1. 你可以在一个组件中同时使用 scoped 和 non-scoped styles
+### 混用本地和全局样式
 
-  ``` html
-  <style>
-  /* global styles */
-  </style>
+你可以在一个组件中同时使用有作用域和无作用域的样式：
 
-  <style scoped>
-  /* local styles */
-  </style>
-  ```
+``` html
+<style>
+/* 全局样式 */
+</style>
+
+<style scoped>
+/* 本地样式 */
+</style>
+```
+
+### 子组件的根元素
 
-2. 子组件的根节点将同时受父组件和子组件作用域 CSS 的影响。
+使用 `scoped` 后，父组件的样式将不会渗透到子组件中。不过一个子组件的根节点会同时受其父组件有作用域的 CSS 和子组件有作用域的 CSS 的影响。这样设计是为了让父组件可以从布局的角度出发，调整其子组件根元素的样式。
 
-3. Partials 不受作用域样式影响。
+### 深度作用选择器
 
-4. **CSS 作用域不能代替 classes**。考虑到浏览器渲染各种 CSS 选择器的方式，当使用 scoped 时，`p { color: red }` 在作用域中会慢很多倍 (即当与属性选择器组合时)。如果你使用 classes 或者 ids 代替，比如 `.example { color: red }`，这样几乎没有性能影响。你可以在[这块试验田](https://stevesouders.com/efws/css-selectors/csscreate.php)测试它们的不同。
+如果你希望 `scoped` 样式中的一个选择器能够作用得“更深”，例如影响子组件，你可以使用 `>>>` 操作符：
+
+``` html
+<style scoped>
+.a >>> .b { /* ... */ }
+</style>
+```
+
+上述代码将会编译成：
+
+``` css
+.a[data-v-f3f3eg9] .b { /* ... */ }
+```
 
-5. **在递归组件中小心使用后代选择器!** 对于带有选择器 `.a .b` 的CSS 规则，如果元素 `.a` 包含递归子组件，所有的子组件中的 `.b` 会被匹配。
+有些像 SASS 之类的预处理器无法正确解析 `>>>`。这种情况下你可以使用 `/deep/` 操作符取而代之——这是一个 `>>>` 的别名，同样可以正常工作。
 
-6. 如果 `scoped` 样式中需要嵌套的选择器，你得在 CSS 中使用 `>>>` 操作符，且在 `scss` 中使用 `/deep/`：
+### 动态生成的内容
 
-    ``` html
-    <style scoped>
-    .a >>> .b {
+通过 `v-html` 创建的 DOM 内容不受作用域内的样式影响，但是你仍然可以通过深度作用选择器来为他们设置样式。
 
-    }
-    </style>
+### 还有一些要留意
 
-    <style lang="scss" scoped>
-    .a /deep/ .b {
+- **CSS 作用域不能代替 class**。考虑到浏览器渲染各种 CSS 选择器的方式，当 `p { color: red }` 设置了作用域时 (即与特性选择器组合使用时) 会慢很多倍。如果你使用 class 或者 id 取而代之，比如 `.example { color: red }`，性能影响就会消除。你可以在[这块试验田](https://stevesouders.com/efws/css-selectors/csscreate.php)中测试它们的不同。
 
-    }
-    </style>
-    ```
+- **在递归组件中小心使用后代选择器!** 对选择器 `.a .b` 中的 CSS 规则来说，如果匹配 `.a` 的元素包含一个递归子组件，则所有的子组件中的 `.b` 都将被这个规则匹配。

docs/zh-cn/options.md

@@ -136,6 +136,22 @@ module.exports = {
 
   如果设置为 `false`，模版中 HTML 标签之前的空格将会被忽略。
 
+### compilerModules
+
+- 类型：`Array<ModuleOptions>`
+- 默认值：`[]`
+
+  为 `vue-template-compiler` 配置 `modules` 选项。相关细节请查阅 `vue-template-compiler` 的 [`modules` 选项](https://github.com/vuejs/vue/blob/dev/packages/vue-template-compiler/README.md#compilercompiletemplate-options)。
+
+### compilerDirectives
+
+- 类型：`{ [tag: string]: Function }`
+- 默认值：`{}` (v13.0.5+)
+
+  > 版本说明：在 v12.x 中，从 v12.2.3+ 开始支持
+
+  为 `vue-template-compiler` 配置 `directives` 选项。相关细节请查阅 `vue-template-compiler` 的 [`modules` 选项](https://github.com/vuejs/vue/blob/dev/packages/vue-template-compiler/README.md#compilercompiletemplate-options)。
+
 ### transformToRequire
 
 - 类型: `{ [tag: string]: string | Array<string> }`