updates for 2.3.0

Author: yyx990803

src/v2/api/index.md

@@ -122,7 +122,7 @@ type: api
   ```html
   <input type="text" @keyup.media-play-pause="method">
   ```
-  
+
   Define custom key alias(es) for v-on.
 
 ### performance
@@ -1670,9 +1670,10 @@ All lifecycle hooks automatically have their `this` context bound to the instanc
   - `.{keyCode | keyAlias}` - only trigger handler on certain keys.
   - `.native` - listen for a native event on the root element of component.
   - `.once` - trigger handler at most once.
-  - `.left` - (2.2.0) only trigger handler for left button mouse events.
-  - `.right` - (2.2.0) only trigger handler for right button mouse events.
-  - `.middle` - (2.2.0) only trigger handler for middle button mouse events.
+  - `.left` - (2.2.0+) only trigger handler for left button mouse events.
+  - `.right` - (2.2.0+) only trigger handler for right button mouse events.
+  - `.middle` - (2.2.0+) only trigger handler for middle button mouse events.
+  - `.passive` - (2.3.0+) attaches a DOM event with `{ passive: true }`.
 
 - **Usage:**
 
@@ -1742,7 +1743,8 @@ All lifecycle hooks automatically have their `this` context bound to the instanc
 
 - **Modifiers:**
   - `.prop` - Bind as a DOM property instead of an attribute. ([what's the difference?](http://stackoverflow.com/questions/6003819/properties-and-attributes-in-html#answer-6004028))
-  - `.camel` - transform the kebab-case attribute name into camelCase. (supported since 2.1.0)
+  - `.camel` - (2.1.0+) transform the kebab-case attribute name into camelCase.
+  - `.sync` - (2.3.0+) a syntax sugar that expands into a `v-on` handler for updating the bound value.
 
 - **Usage:**
 
@@ -1802,6 +1804,7 @@ All lifecycle hooks automatically have their `this` context bound to the instanc
 - **See also:**
   - [Class and Style Bindings](../guide/class-and-style.html)
   - [Components - Component Props](../guide/components.html#Props)
+  - [Components - `.sync` Modifier](../guide/components.html#sync-Modifier)
 
 ### v-model
 

src/v2/guide/class-and-style.md

@@ -192,3 +192,13 @@ The array syntax for `v-bind:style` allows you to apply multiple style objects t
 ### Auto-prefixing
 
 When you use a CSS property that requires [vendor prefixes](https://developer.mozilla.org/en-US/docs/Glossary/Vendor_Prefix) in `v-bind:style`, for example `transform`, Vue will automatically detect and add appropriate prefixes to the applied styles.
+
+### Multiple Values
+
+> 2.3.0+
+
+Starting in 2.3 you can provide an array of multiple (prefixed) values to a style property, for example:
+
+``` html
+<div :style="{ display: ["-webkit-box", "-ms-flexbox", "flex"] }">
+```

src/v2/guide/components.md

@@ -534,6 +534,34 @@ There may be times when you want to listen for a native event on the root elemen
 <my-component v-on:click.native="doTheThing"></my-component>
 ```
 
+### `.sync` Modifier
+
+> 2.3.0+
+
+In some cases we may need "two-way binding" for a prop - in fact, in Vue 1.x this is exactly what the `.sync` modifier provided. When a child component mutates a prop that has `.sync`, the value change will be reflected in the parent. This is convenient, however it leads to maintenance issues in the long run because it breaks the one-way data flow assumption: the code that mutates child props are implicitly affecting parent state.
+
+This is why we removed the `.sync` modifier when 2.0 was released. However, we've found that there are indeed cases where it could be useful, especially when shipping reusable components. What we need to change is **making the code in the child that affects parent state more consistent and explicit.**
+
+In 2.3 we re-introduced the `.sync` modifier for props, but this time it is just syntax sugar that automatically expands into an additional `v-on` listener:
+
+The following
+
+``` html
+<comp :foo.sync="bar"></comp>
+```
+
+is expanded into:
+
+``` html
+<comp :foo="bar" @update:foo="val => bar = val"></comp>
+```
+
+For the child component to update `foo`'s value, it needs to explicitly emit an event instead of mutating the prop:
+
+``` js
+this.$emit('update:foo', newValue)
+```
+
 ### Form Input Components using Custom Events
 
 Custom events can also be used to create custom inputs that work with `v-model`. Remember:
@@ -1063,6 +1091,30 @@ new Vue({
 
 <p class="tip">If you're a <strong>Browserify</strong> user that would like to use async components, its creator has unfortunately [made it clear](https://github.com/substack/node-browserify/issues/58#issuecomment-21978224) that async loading "is not something that Browserify will ever support." Officially, at least. The Browserify community has found [some workarounds](https://github.com/vuejs/vuejs.org/issues/620), which may be helpful for existing and complex applications. For all other scenarios, we recommend simply using Webpack for built-in, first-class async support.</p>
 
+### Advanced Async Components
+
+> New in 2.3.0
+
+Starting in 2.3 the async component factory can also return an object of the following format:
+
+``` js
+const AsyncComp = () => ({
+  // The component to load. Should be a Promise
+  component: import('./MyComp.vue'),
+  // A component to use while the async component is loading
+  loading: LoadingComp,
+  // A component to use if the load fails
+  error: ErrorComp,
+  // Delay before showing the loading component. Default: 200ms.
+  delay: 200,
+  // The error component will be displayed if a timeout is
+  // provided and exceeded. Default: Infinity.
+  timeout: 3000
+})
+```
+
+Note that when used as a route component in `vue-router`, these properties will be ignored because async components are resolved upfront before the route navigation happens. You also need to use `vue-router` 2.4.0+ if you wish to use the above syntax for route components.
+
 ### Component Naming Conventions
 
 When registering components (or props), you can use kebab-case, camelCase, or TitleCase. Vue doesn't care.

src/v2/guide/render-function.md

@@ -468,13 +468,17 @@ Vue.component('my-component', {
 })
 ```
 
+> Note: in versions <=2.3.0, the `props` option is required if you wish to accept props in a functional component. In 2.3.0+ you can omit the `props` option and all attributes found on the component node will be implicitly extracted as props.
+
 Everything the component needs is passed through `context`, which is an object containing:
 
 - `props`: An object of the provided props
 - `children`: An array of the VNode children
 - `slots`: A function returning a slots object
 - `data`: The entire data object passed to the component
 - `parent`: A reference to the parent component
+- `listeners`: (2.3.0+) An object containing parent-registered event listeners. This is simply an alias to `data.on`
+- `injections`: (2.3.0+) if using the [`inject`](https://vuejs.org/v2/api/#provide-inject) option, this will contain resolved injections.
 
 After adding `functional: true`, updating the render function of our anchored heading component would simply require adding the `context` argument, updating `this.$slots.default` to `context.children`, then updating `this.level` to `context.props.level`.