Skip to content

Commit 4f81f9a

Browse files
yyx990803yyx990803
committed
2.2 updates
1 parent 2029a89 commit 4f81f9a

File tree

5 files changed

+273
-42
lines changed

5 files changed

+273
-42
lines changed

‎src/v2/api/index.md

Lines changed: 195 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -65,17 +65,21 @@ type: api
6565

6666
- **Type:** `Function`
6767

68-
- **Default:** Error is thrown in place
68+
- **Default:** `undefined`
6969

7070
- **Usage:**
7171

7272
``` js
73-
Vue.config.errorHandler = function (err, vm) {
73+
Vue.config.errorHandler = function (err, vm, type) {
7474
// handle error
75+
// `type` is a Vue-specific error type, e.g. which lifecycle hook
76+
// the error was found in. Only available in 2.2.0+
7577
}
7678
```
7779

78-
Assign a handler for uncaught errors during component render and watchers. The handler gets called with the error and the Vue instance.
80+
Assign a handler for uncaught errors during component render function and watchers. The handler gets called with the error and the Vue instance.
81+
82+
> In 2.2.0, this hook also captures errors in component lifecycle hooks. Also, when this hook is `undefined`, captured errors will be logged with `console.error` instead of crashing the app.
7983
8084
> [Sentry](https://sentry.io), an error tracking service, provides [official integration](https://sentry.io/for/vue/) using this option.
8185
@@ -114,6 +118,30 @@ type: api
114118

115119
Define custom key alias(es) for v-on.
116120

121+
### performance
122+
123+
> New in 2.2.0
124+
125+
- **Type:** `boolean`
126+
127+
- **Default:** `false`
128+
129+
- **Usage**:
130+
131+
Set this to `true` to enable component init, compile, render and patch performance tracing in the browser devtool timeline. Only works in development mode and in browsers that support the [performance.mark](https://developer.mozilla.org/en-US/docs/Web/API/Performance/mark) API.
132+
133+
### productionTip
134+
135+
> New in 2.2.0
136+
137+
- **Type:** `boolean`
138+
139+
- **Default:** `true`
140+
141+
- **Usage**:
142+
143+
Set this to `false` to prevent the production tip on Vue startup.
144+
117145
## Global API
118146

119147
<h3 id="Vue-extend">Vue.extend( options )</h3>
@@ -195,17 +223,19 @@ type: api
195223

196224
- **See also:** [Reactivity in Depth](../guide/reactivity.html)
197225

198-
<h3 id="Vue-delete">Vue.delete( object, key )</h3>
226+
<h3 id="Vue-delete">Vue.delete( target, key )</h3>
199227

200228
- **Arguments:**
201-
- `{Object} object`
202-
- `{string} key`
229+
- `{Object | Array} target`
230+
- `{string | number} key`
203231

204232
- **Usage:**
205233

206234
Delete a property on an object. If the object is reactive, ensure the deletion triggers view updates. This is primarily used to get around the limitation that Vue cannot detect property deletions, but you should rarely need to use it.
207235

208-
**Note the object cannot be a Vue instance, or the root data object of a Vue instance.**
236+
> Also works with on Array + index in 2.2.0+.
237+
238+
<p class="tip">The target object cannot be a Vue instance, or the root data object of a Vue instance.</p>
209239

210240
- **See also:** [Reactivity in Depth](../guide/reactivity.html)
211241

@@ -329,7 +359,7 @@ type: api
329359
```
330360

331361
- **See also:** [Render Functions](../guide/render-function.html)
332-
362+
333363
<h3 id="Vue-version">Vue.version</h3>
334364

335365
- **Details**: Provides the installed version of Vue as a string. This is especially useful for community plugins and components, where you might use different strategies for different versions.
@@ -599,7 +629,7 @@ if (version === 2) {
599629

600630
### render
601631

602-
- **Type:** `Function`
632+
- **Type:** `(createElement: () => VNode) => VNode`
603633

604634
- **Details:**
605635

@@ -610,6 +640,34 @@ if (version === 2) {
610640
- **See also:**
611641
- [Render Functions](../guide/render-function)
612642

643+
### renderError
644+
645+
> New in 2.2.0
646+
647+
- **Type:** `(createElement: () => VNode, error: Error) => VNode`
648+
649+
- **Details:**
650+
651+
**Only works in development mode.**
652+
653+
Provide an alternative render output when the default `render` function encounters an error. The error will be passed to `renderError` as the second argument. This is particularly useful when used together with hot-reload.
654+
655+
- **Example:**
656+
657+
``` js
658+
new Vue({
659+
render (h) {
660+
throw new Error('oops')
661+
},
662+
renderError (h, err) {
663+
return h('pre', { style: { color: 'red' }}, err.stack)
664+
}
665+
}).$mount('#app')
666+
```
667+
668+
- **See also:**
669+
- [Render Functions](../guide/render-function)
670+
613671
## Options / Lifecycle Hooks
614672

615673
All lifecycle hooks automatically have their `this` context bound to the instance, so that you can access data, computed properties, and methods. This means __you should not use an arrow function to define a lifecycle method__ (e.g. `created: () => this.fetchTodos()`). The reason is arrow functions bind the parent context, so `this` will not be the Vue instance as you expect and `this.fetchTodos` will be undefined.
@@ -774,7 +832,7 @@ All lifecycle hooks automatically have their `this` context bound to the instanc
774832
- **See also:**
775833
- [Components](../guide/components.html)
776834

777-
## Options / Misc
835+
## Options / Composition
778836

779837
### parent
780838

@@ -812,18 +870,6 @@ All lifecycle hooks automatically have their `this` context bound to the instanc
812870
813871
- **See also:** [Mixins](../guide/mixins.html)
814872
815-
### name
816-
817-
- **Type:** `string`
818-
819-
- **Restriction:** only respected when used as a component option.
820-
821-
- **Details:**
822-
823-
Allow the component to recursively invoke itself in its template. Note that when a component is registered globally with `Vue.component()`, the global ID is automatically set as its name.
824-
825-
Another benefit of specifying a `name` option is debugging. Named components result in more helpful warning messages. Also, when inspecting an app in the [vue-devtools](https://github.com/vuejs/vue-devtools), unnamed components will show up as `<AnonymousComponent>`, which isn't very informative. By providing the `name` option, you will get a much more informative component tree.
826-
827873
### extends
828874
829875
- **Type:** `Object | Function`
@@ -846,6 +892,77 @@ All lifecycle hooks automatically have their `this` context bound to the instanc
846892
}
847893
```
848894
895+
### provide / inject
896+
897+
> New in 2.2.0
898+
899+
- **Type:**
900+
- **provide:** `Object | () => Object`
901+
- **inject:** `Array<string> | { [key: string]: string | Symbol }`
902+
903+
- **Details:**
904+
905+
<p class="tip">`provide` and `inject` are primarily provided for advanced plugin / component library use cases. It is NOT recommended to use them in generic application code.</p>
906+
907+
This pair of options are used together to allow an ancestor component to serve as a dependency injector for its all descendants, regardless of how deep the component hierarchy is. If you are familiar with React, this is very similar to React's context feature.
908+
909+
The `provide` option should be an object or a function that returns an object. This object contains the properties that are available for injection into its descendants. You can use ES2015 Symbols as keys in this object.
910+
911+
The `inject` options should be either an Array of strings or an object where the keys stand for the local binding name, and the value being the key (string or Symbol) to search for in available injections.
912+
913+
The provider component must be in the parent chain of the component that wishes to inject the provided properties.
914+
915+
- **Example:**
916+
917+
``` js
918+
var Provider = {
919+
provide: {
920+
foo: 'bar'
921+
},
922+
// ...
923+
}
924+
925+
var Child = {
926+
inject: ['foo'],
927+
created () {
928+
console.log(this.foo) // -> "bar"
929+
}
930+
// ...
931+
}
932+
```
933+
934+
With ES2015 Symbols, function `provide` and object `inject`:
935+
``` js
936+
const s = Symbol()
937+
938+
const Provider = {
939+
provide () {
940+
return {
941+
[s]: 'foo'
942+
}
943+
}
944+
}
945+
946+
const Child = {
947+
inject: { s },
948+
// ...
949+
}
950+
```
951+
952+
## Options / Misc
953+
954+
### name
955+
956+
- **Type:** `string`
957+
958+
- **Restriction:** only respected when used as a component option.
959+
960+
- **Details:**
961+
962+
Allow the component to recursively invoke itself in its template. Note that when a component is registered globally with `Vue.component()`, the global ID is automatically set as its name.
963+
964+
Another benefit of specifying a `name` option is debugging. Named components result in more helpful warning messages. Also, when inspecting an app in the [vue-devtools](https://github.com/vuejs/vue-devtools), unnamed components will show up as `<AnonymousComponent>`, which isn't very informative. By providing the `name` option, you will get a much more informative component tree.
965+
849966
### delimiters
850967
851968
- **Type:** `Array<string>`
@@ -876,6 +993,46 @@ All lifecycle hooks automatically have their `this` context bound to the instanc
876993
877994
- **See also:** [Functional Components](../guide/render-function.html#Functional-Components)
878995
996+
### model
997+
998+
> New in 2.2.0
999+
1000+
- **Type:** `{ prop?: string, event?: string }`
1001+
1002+
- **Details:**
1003+
1004+
Allows a custom component to customize the prop and event used when it's used with `v-model`. By default, `v-model` on a component uses `value` as the prop and `input` as the event, but some input types such as checkboxes and radio buttons may want to use the `value` prop for a different purpose. Using the `model` option can avoid the conflict in such cases.
1005+
1006+
- **Example:**
1007+
1008+
``` js
1009+
Vue.component('my-checkbox', {
1010+
model: {
1011+
prop: 'checked',
1012+
event: 'change'
1013+
},
1014+
props: {
1015+
// this allows using the `value` prop for a different purpose
1016+
value: String
1017+
},
1018+
// ...
1019+
})
1020+
```
1021+
1022+
``` html
1023+
<my-checkbox v-model="foo" value="some value"></my-checkbox>
1024+
```
1025+
1026+
The above will be equivalent to:
1027+
1028+
``` html
1029+
<my-checkbox
1030+
:checked="foo"
1031+
@change="val => { foo = val }"
1032+
value="some value">
1033+
</my-checkbox>
1034+
```
1035+
8791036
## Instance Properties
8801037
8811038
### vm.$data
@@ -888,6 +1045,16 @@ All lifecycle hooks automatically have their `this` context bound to the instanc
8881045
8891046
- **See also:** [Options - data](#data)
8901047
1048+
### vm.$props
1049+
1050+
> New in 2.2.0
1051+
1052+
- **Type:** `Object`
1053+
1054+
- **Details:**
1055+
1056+
An object representing the current props a component has received. The Vue instance proxies access to the properties on its props object.
1057+
8911058
### vm.$el
8921059
8931060
- **Type:** `HTMLElement`
@@ -1143,7 +1310,7 @@ All lifecycle hooks automatically have their `this` context bound to the instanc
11431310
<h3 id="vm-on">vm.$on( event, callback )</h3>
11441311
11451312
- **Arguments:**
1146-
- `{string} event`
1313+
- `{string | Array<string>} event` (array only supported in 2.2.0+)
11471314
- `{Function} callback`
11481315
11491316
- **Usage:**
@@ -1456,6 +1623,9 @@ All lifecycle hooks automatically have their `this` context bound to the instanc
14561623
- `.{keyCode | keyAlias}` - only trigger handler on certain keys.
14571624
- `.native` - listen for a native event on the root element of component.
14581625
- `.once` - trigger handler at most once.
1626+
- `.left` - (2.2.0) only trigger handler for left button mouse events.
1627+
- `.right` - (2.2.0) only trigger handler for right button mouse events.
1628+
- `.middle` - (2.2.0) only trigger handler for middle button mouse events.
14591629

14601630
- **Usage:**
14611631

@@ -1867,6 +2037,8 @@ All lifecycle hooks automatically have their `this` context bound to the instanc
18672037
18682038
When a component is toggled inside `<keep-alive>`, its `activated` and `deactivated` lifecycle hooks will be invoked accordingly.
18692039
2040+
> In 2.2.0 and above, `activated` and `deactivated` will fire for all nested components inside a `<keep-alive>` tree.
2041+
18702042
Primarily used with preserve component state or avoid re-rendering.
18712043
18722044
```html

0 commit comments

Comments
 (0)