Skip to content

Commit bf22ab2

Browse files
committed
Merge remote-tracking branch 'upstream/master'
# Conflicts: # src/v2/api/index.md # src/v2/guide/installation.md # src/v2/guide/list.md # src/v2/guide/typescript.md # themes/vue/layout/index.ejs
2 parents 5dc8689 + a0416e4 commit bf22ab2

15 files changed

+5630
-4633
lines changed

src/v2/api/index.md

+202-31
Original file line numberDiff line numberDiff line change
@@ -65,18 +65,22 @@ type: api
6565

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

68-
- **Par défaut :** les exceptions ne sont pas interceptées
68+
- **Par défaut :** `undefined`
6969

7070
- **Utilisation :**
7171

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

7880
Définit un gestionnaire pour les erreurs non interceptées pendant le rendu d'un composant et les appels aux observateurs. Ce gestionnaire sera appelé avec comme arguments l'erreur et l'instance de Vue associée.
7981

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.
83+
8084
> [Sentry](https://sentry.io), un service de traçage d'erreur, fournit une [intégration officielle](https://sentry.io/for/vue/) utilisant cette option.
8185
8286
### ignoredElements
@@ -114,6 +118,30 @@ type: api
114118

115119
Définit des alias pour les touches du clavier avec `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
## API globale
118146

119147
<h3 id="Vue-extend">Vue.extend( options )</h3>
@@ -178,11 +206,11 @@ type: api
178206
179207
- **Voir aussi :** [File de mise à jour asynchrone](../guide/reactivity.html#Async-Update-Queue)
180208

181-
<h3 id="Vue-set">Vue.set( object, key, value )</h3>
209+
<h3 id="Vue-set">Vue.set( target, key, value )</h3>
182210

183211
- **Arguments :**
184-
- `{Object} object`
185-
- `{string} key`
212+
- `{Object | Array} target`
213+
- `{string | number} key`
186214
- `{any} value`
187215

188216
- **Retourne:** la valeur assignée.
@@ -195,17 +223,19 @@ type: api
195223

196224
- **Voir aussi :** [Réactivité en détail](../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
- **Utilisation :**
205233

206234
Supprime une propriété d'un objet. Si l'objet est réactif, cette méthode s'assure que la suppression déclenche les mises à jour de la vue. Ceci est principalement utilisé pour passer outre la limitation de Vue qui est de ne pas pouvoir détecter automatiquement la suppression de propriétés, mais vous devriez rarement en avoir besoin.
207235

208-
**Notez que l'objet ne peut pas être une instance de Vue, ou l'objet de données à la racine d'une instance de Vue.**
236+
> Also works with on Array + index in 2.2.0+.
237+
238+
<p class="tip">L'objet cible ne peut pas être une instance de Vue, ou l'objet de données à la racine d'une instance de Vue.</p>
209239

210240
- **Voir aussi :** [Réactivité en détail](../guide/reactivity.html)
211241

@@ -599,7 +629,7 @@ if (version === 2) {
599629

600630
### render
601631

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

604634
- **Détails :**
605635

@@ -610,6 +640,34 @@ if (version === 2) {
610640
- **Voir aussi :**
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.
@@ -750,7 +808,6 @@ All lifecycle hooks automatically have their `this` context bound to the instanc
750808

751809
- **Voir aussi :**
752810
- [Custom Directives](../guide/custom-directive.html)
753-
- [Assets Naming Convention](../guide/components.html#Assets-Naming-Convention)
754811

755812
### filters
756813

@@ -774,7 +831,7 @@ All lifecycle hooks automatically have their `this` context bound to the instanc
774831
- **Voir aussi :**
775832
- [Components](../guide/components.html)
776833

777-
## Options / Misc
834+
## Options / Composition
778835

779836
### parent
780837

@@ -812,18 +869,6 @@ All lifecycle hooks automatically have their `this` context bound to the instanc
812869
813870
- **Voir aussi :** [Mixins](../guide/mixins.html)
814871
815-
### name
816-
817-
- **Type :** `string`
818-
819-
- **Restriction :** only respected when used as a component option.
820-
821-
- **Détails :**
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-
827872
### extends
828873
829874
- **Type :** `Object | Function`
@@ -846,6 +891,77 @@ All lifecycle hooks automatically have their `this` context bound to the instanc
846891
}
847892
```
848893
894+
### provide / inject
895+
896+
> New in 2.2.0
897+
898+
- **Type:**
899+
- **provide:** `Object | () => Object`
900+
- **inject:** `Array<string> | { [key: string]: string | Symbol }`
901+
902+
- **Details:**
903+
904+
<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>
905+
906+
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, as long as they are in the same parent chain. If you are familiar with React, this is very similar to React's context feature.
907+
908+
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, but only in environments that natively support `Symbol` and `Reflect.ownKeys`.
909+
910+
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.
911+
912+
> Note: the `provide` and `inject` bindings are NOT reactive. This is intentional. However, if you pass down an observed object, properties on that object do remain reactive.
913+
914+
- **Example:**
915+
916+
``` js
917+
var Provider = {
918+
provide: {
919+
foo: 'bar'
920+
},
921+
// ...
922+
}
923+
924+
var Child = {
925+
inject: ['foo'],
926+
created () {
927+
console.log(this.foo) // -> "bar"
928+
}
929+
// ...
930+
}
931+
```
932+
933+
With ES2015 Symbols, function `provide` and object `inject`:
934+
``` js
935+
const s = Symbol()
936+
937+
const Provider = {
938+
provide () {
939+
return {
940+
[s]: 'foo'
941+
}
942+
}
943+
}
944+
945+
const Child = {
946+
inject: { s },
947+
// ...
948+
}
949+
```
950+
951+
## Options / Misc
952+
953+
### name
954+
955+
- **Type:** `string`
956+
957+
- **Restriction:** only respected when used as a component option.
958+
959+
- **Details:**
960+
961+
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.
962+
963+
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.
964+
849965
### delimiters
850966
851967
- **Type :** `Array<string>`
@@ -876,6 +992,46 @@ All lifecycle hooks automatically have their `this` context bound to the instanc
876992
877993
- **Voir aussi :** [Functional Components](../guide/render-function.html#Functional-Components)
878994
995+
### model
996+
997+
> New in 2.2.0
998+
999+
- **Type:** `{ prop?: string, event?: string }`
1000+
1001+
- **Details:**
1002+
1003+
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.
1004+
1005+
- **Example:**
1006+
1007+
``` js
1008+
Vue.component('my-checkbox', {
1009+
model: {
1010+
prop: 'checked',
1011+
event: 'change'
1012+
},
1013+
props: {
1014+
// this allows using the `value` prop for a different purpose
1015+
value: String
1016+
},
1017+
// ...
1018+
})
1019+
```
1020+
1021+
``` html
1022+
<my-checkbox v-model="foo" value="some value"></my-checkbox>
1023+
```
1024+
1025+
The above will be equivalent to:
1026+
1027+
``` html
1028+
<my-checkbox
1029+
:checked="foo"
1030+
@change="val => { foo = val }"
1031+
value="some value">
1032+
</my-checkbox>
1033+
```
1034+
8791035
## Instance Properties
8801036
8811037
### vm.$data
@@ -888,6 +1044,16 @@ All lifecycle hooks automatically have their `this` context bound to the instanc
8881044
8891045
- **Voir aussi :** [Options - data](#data)
8901046
1047+
### vm.$props
1048+
1049+
> New in 2.2.0
1050+
1051+
- **Type:** `Object`
1052+
1053+
- **Details:**
1054+
1055+
An object representing the current props a component has received. The Vue instance proxies access to the properties on its props object.
1056+
8911057
### vm.$el
8921058
8931059
- **Type :** `HTMLElement`
@@ -1111,11 +1277,11 @@ All lifecycle hooks automatically have their `this` context bound to the instanc
11111277
// callback is fired immediately with current value of `a`
11121278
```
11131279
1114-
<h3 id="vm-set">vm.$set( object, key, value )</h3>
1280+
<h3 id="vm-set">vm.$set( target, key, value )</h3>
11151281
11161282
- **Arguments :**
1117-
- `{Object} object`
1118-
- `{string} key`
1283+
- `{Object | Array} target`
1284+
- `{string | number} key`
11191285
- `{any} value`
11201286
11211287
- **Retourne :** the set value.
@@ -1126,11 +1292,11 @@ All lifecycle hooks automatically have their `this` context bound to the instanc
11261292
11271293
- **Voir aussi :** [Vue.set](#Vue-set)
11281294
1129-
<h3 id="vm-delete">vm.$delete( object, key )</h3>
1295+
<h3 id="vm-delete">vm.$delete( target, key )</h3>
11301296
11311297
- **Arguments :**
1132-
- `{Object} object`
1133-
- `{string} key`
1298+
- `{Object | Array} target`
1299+
- `{string | number} key`
11341300
11351301
- **Utilisation :**
11361302
@@ -1143,7 +1309,7 @@ All lifecycle hooks automatically have their `this` context bound to the instanc
11431309
<h3 id="vm-on">vm.$on( event, callback )</h3>
11441310
11451311
- **Arguments :**
1146-
- `{string} event`
1312+
- `{string | Array<string>} event` (array only supported in 2.2.0+)
11471313
- `{Function} callback`
11481314
11491315
- **Utilisation :**
@@ -1456,6 +1622,9 @@ All lifecycle hooks automatically have their `this` context bound to the instanc
14561622
- `.{keyCode | keyAlias}` - only trigger handler on certain keys.
14571623
- `.native` - listen for a native event on the root element of component.
14581624
- `.once` - trigger handler at most once.
1625+
- `.left` - (2.2.0) only trigger handler for left button mouse events.
1626+
- `.right` - (2.2.0) only trigger handler for right button mouse events.
1627+
- `.middle` - (2.2.0) only trigger handler for middle button mouse events.
14591628

14601629
- **Utilisation :**
14611630

@@ -1867,6 +2036,8 @@ All lifecycle hooks automatically have their `this` context bound to the instanc
18672036
18682037
When a component is toggled inside `<keep-alive>`, its `activated` and `deactivated` lifecycle hooks will be invoked accordingly.
18692038
2039+
> In 2.2.0 and above, `activated` and `deactivated` will fire for all nested components inside a `<keep-alive>` tree.
2040+
18702041
Primarily used with preserve component state or avoid re-rendering.
18712042
18722043
```html

0 commit comments

Comments
 (0)