From 8b67e4748dfa778a8d8d46411da38e3dbd36c00b Mon Sep 17 00:00:00 2001 From: Jinjiang Date: Mon, 16 Oct 2017 23:02:36 +0800 Subject: [PATCH 1/3] Synced recent updates (#dee0bfd). --- src/v2/api/index.md | 76 +- src/v2/examples/index.md | 2 +- src/v2/guide/class-and-style.md | 2 +- src/v2/guide/comparison.md | 4 +- src/v2/guide/components.md | 7 +- src/v2/guide/conditional.md | 2 +- src/v2/guide/custom-directive.md | 6 +- src/v2/guide/deployment.md | 16 + src/v2/guide/installation.md | 10 +- src/v2/guide/instance.md | 2 +- src/v2/guide/single-file-components.md | 18 +- src/v2/guide/syntax.md | 14 +- src/v2/style-guide/index.md | 62 +- themes/vue/_config.yml | 2 +- .../layout/partials/ecosystem_dropdown.ejs | 23 +- themes/vue/layout/partials/sponsors.ejs | 4 +- themes/vue/source/css/_style-guide.styl | 6 + themes/vue/source/css/page.styl | 2 +- themes/vue/source/js/vue.js | 2048 ++++++++++------- themes/vue/source/js/vue.min.js | 4 +- 20 files changed, 1392 insertions(+), 918 deletions(-) diff --git a/src/v2/api/index.md b/src/v2/api/index.md index 860a6369e..2cb2439c5 100644 --- a/src/v2/api/index.md +++ b/src/v2/api/index.md @@ -105,7 +105,7 @@ type: api ### ignoredElements -- **类型**：`Array` +- **类型**：`Array` - **默认值**：`[]` @@ -113,7 +113,11 @@ type: api ``` js Vue.config.ignoredElements = [ - 'my-custom-web-component', 'another-web-component' + 'my-custom-web-component', + 'another-web-component', + // 用一个 `RegExp` 忽略所有“ion-”开头的元素 + // 2.5+ only + /^ion-/ ] ``` @@ -590,7 +594,8 @@ type: api data: { a: 1, b: 2, - c: 3 + c: 3, + d: 4 }, watch: { a: function (val, oldVal) { @@ -602,6 +607,11 @@ type: api c: { handler: function (val, oldVal) { /* ... */ }, deep: true + }, + // 该回调将会在监听开始之后被立即调用 + d: { + handler: function (val, oldVal) { /* ... */ }, + immediate: true } } }) @@ -845,6 +855,28 @@ type: api - **参考**：[生命周期图示](../guide/instance.html#生命周期图示) +### errorCaptured + +> 2.5.0+ 新增 + +- **类型**：`(err: Error, vm: Component, info: string) => ?boolean` + +- **详细**： + + 当捕获一个来自子孙组件的错误时被调用。此钩子会收到三个参数：错误本身、发生错误的组件实例以及一个包含错误来源信息的字符串。此钩子可以返回 `false` 以阻止该错误继续向上传播。 + +

你可以在此钩子中修改组件的状态。因此在你的模板或渲染函数中设置其它内容的短路条件非常重要，它可以防止当一个错误被捕获时该组件抛出一个无限的渲染循环。

+ + **错误传播规则** + + - 默认情况下，如果全局的 `config.errorHandler` 被定义，所有的错误仍会发送它，因此这些错误仍让会向单一的分析服务的地方进行汇报。 + + - 如果一个组件的继承或父级从属链路中存在多个 `errorCaptured` 钩子，则它们将会被相同的错误同时唤起。 + + - 如果此 `errorCaptured` 钩子自身抛出了一个错误，则这个新错误和原本被捕获的错误都会发送给全局的 `config.errorHandler`。 + + - 一个 `errorCaptured` 钩子能够返回 `false` 以阻止错误继续向上传播。本质上是说“这个错误已经被搞定了且应该被忽略”。它会阻止其它任何会被这个错误唤起的 `errorCaptured` 钩子和全局的 `config.errorHandler`。 + ## 选项 / 资源 ### directives @@ -942,7 +974,7 @@ type: api - **类型**： - **provide**：`Object | () => Object` - - **inject**：`Array | { [key: string]: string | Symbol }` + - **inject**：`Array | { [key: string]: string | Symbol | Object }` - **详细**： @@ -1024,6 +1056,42 @@ type: api } ``` + > 在 2.5.0+ 的注入可以通过设置默认值使其变成可选项： + + ``` js + const Child = { + inject: { + foo: { default: 'foo' } + } + } + ``` + + 如果它需要从一个不同名字的属性注入，则使用 `from` 来表示其源属性： + + ``` js + const Child = { + inject: { + foo: { + from: 'bar', + default: 'foo' + } + } + } + ``` + + 对于 prop 的默认值来说是类似的，你需要对非原始值使用一个工厂方法： + + ``` js + const Child = { + inject: { + foo: { + from: 'bar', + default: () => [1, 2, 3] + } + } + } + ``` + ## 选项 / 其它 ### name diff --git a/src/v2/examples/index.md b/src/v2/examples/index.md index 5dc999a7c..b1cc2fa36 100644 --- a/src/v2/examples/index.md +++ b/src/v2/examples/index.md @@ -6,4 +6,4 @@ order: 0 > 蠢萌的 Markdown 编辑器。 - + diff --git a/src/v2/guide/class-and-style.md b/src/v2/guide/class-and-style.md index f7edd51c2..7fe5958c1 100644 --- a/src/v2/guide/class-and-style.md +++ b/src/v2/guide/class-and-style.md @@ -105,7 +105,7 @@ data: {
``` -这样写将始终添加 `errorClass`，但是只有在 `isActive` 是 `true` 时才添加 `activeClass`。 +这样写将始终添加 `errorClass`，但是只有在 `isActive` 是 [truthy](https://developer.mozilla.org/zh-CN/docs/Glossary/Truthy) 时才添加 `activeClass`。 不过，当有多个条件 class 时这样写有些繁琐。所以在数组语法中也可以使用对象语法： diff --git a/src/v2/guide/comparison.md b/src/v2/guide/comparison.md index 03fead553..8b922a804 100644 --- a/src/v2/guide/comparison.md +++ b/src/v2/guide/comparison.md @@ -223,9 +223,7 @@ Polymer 自定义的元素是用 HTML 文件来创建的，这会限制使用 Ja ## Riot -Riot 2.0 提供了一个类似于基于组件的开发模型 (在 Riot 中称之为 Tag)，它提供了小巧精美的 API。Riot 和 Vue 在设计理念上可能有许多相似处。尽管相比 Riot ，Vue 要显得重一点，Vue 还是有很多显著优势的： +Riot 3.0 提供了一个类似于基于组件的开发模型 (在 Riot 中称之为 Tag)，它提供了小巧精美的 API。Riot 和 Vue 在设计理念上可能有许多相似处。尽管相比 Riot ，Vue 要显得重一点，Vue 还是有很多显著优势的： -- [过渡效果系统](transitions.html)。Riot 现在还没有提供。 -- 功能更加强大的路由机制，Riot 的路由功能的 API 是极少的。 - 更好的性能。Riot 使用了 [遍历 DOM 树](http://riotjs.com/compare/#virtual-dom-vs-expressions-binding) 而不是虚拟 DOM，但实际上用的还是脏检查机制，因此和 AngularJS 患有相同的性能问题。 - 更多成熟工具的支持。Vue 提供官方支持 [webpack](https://github.com/vuejs/vue-loader) 和 [Browserify](https://github.com/vuejs/vueify)，而 Riot 是依靠社区来建立集成系统。 diff --git a/src/v2/guide/components.md b/src/v2/guide/components.md index 8cc987591..28223edcb 100644 --- a/src/v2/guide/components.md +++ b/src/v2/guide/components.md @@ -999,9 +999,9 @@ Vue.component('child-component', { ``` html   -
  • {{ props.text }}
    • @@ -1162,6 +1162,7 @@ Vue.component('async-webpack-example', function (resolve) { ``` js Vue.component( 'async-webpack-example', + // 该 `import` 函数返回一个 `Promise` 对象。 () => import('./my-async-component') ) ``` diff --git a/src/v2/guide/conditional.md b/src/v2/guide/conditional.md index 47a14d04c..5f07c7d67 100644 --- a/src/v2/guide/conditional.md +++ b/src/v2/guide/conditional.md @@ -182,7 +182,7 @@ new Vue({ 不同的是带有 `v-show` 的元素始终会被渲染并保留在 DOM 中。`v-show` 只是简单地切换元素的 CSS 属性 `display`。 -

    注意，`v-show` 不支持 `