You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
<h3id="Vue-set">Vue.set( object, key, value )</h3>
@@ -928,13 +930,13 @@ All lifecycle hooks automatically have their `this` context bound to the instanc
928
930
929
931
### vm.$slots
930
932
931
-
-**Type:**`Object`
933
+
-**Type:**`{ [name: string]: ?Array<VNode> }`
932
934
933
935
-**Read only**
934
936
935
937
-**Details:**
936
938
937
-
Used to access content [distributed by slots](../guide/components.html#Content-Distribution-with-Slots). Each [named slot](../guide/components.html#Named-Slots) has its own corresponding property (e.g. the contents of `slot="foo"` will be found at `vm.$slots.foo`). The `default` property contains any nodes not included in a named slot.
939
+
Used to programmatically access content [distributed by slots](../guide/components.html#Content-Distribution-with-Slots). Each [named slot](../guide/components.html#Named-Slots) has its own corresponding property (e.g. the contents of `slot="foo"` will be found at `vm.$slots.foo`). The `default` property contains any nodes not included in a named slot.
938
940
939
941
Accessing `vm.$slots` is most useful when writing a component with a [render function](../guide/render-function.html).
940
942
@@ -972,9 +974,28 @@ All lifecycle hooks automatically have their `this` context bound to the instanc
972
974
```
973
975
974
976
-**See also:**
975
-
-[`<slot>` Component](#slot)
977
+
-[`<slot>` Component](#slot-1)
976
978
-[Content Distribution with Slots](../guide/components.html#Content-Distribution-with-Slots)
Used to programmatically access [scoped slots](../guide/components.html#Scoped-Slots). For each slot, including the `default` one, the object contains a corresponding function that returns VNodes.
992
+
993
+
Accessing `vm.$scopedSlots` is most useful when writing a component with a [render function](../guide/render-function.html).
@@ -1200,15 +1221,17 @@ All lifecycle hooks automatically have their `this` context bound to the instanc
1200
1221
1201
1222
Force the Vue instance to re-render. Note it does not affect all child components, only the instance itself and child components with inserted slot content.
Defer the callback to be executed after the next DOM update cycle. Use it immediately after you've changed some data to wait for the DOM update. This is the same as the global `Vue.nextTick`, except that the callback's `this` context is automatically bound to the instance calling this method.
1211
1232
1233
+
> New in 2.1.0: returns a Promise if no callback is provided and Promise is supported in the execution environment.
1234
+
1212
1235
-**Example:**
1213
1236
1214
1237
```js
@@ -1283,39 +1306,39 @@ All lifecycle hooks automatically have their `this` context bound to the instanc
Conditionally render the elementbased on the truthy-ness of the expression value. The element and its contained directives / components are destroyed and re-constructed during toggles. If the element is a `<template>` element, its content will be extracted as the conditional block.
1315
+
Toggle's the element's `display` CSS property based on the truthy-ness of the expression value.
1293
1316
1294
1317
This directive triggers transitions when its condition changes.
Toggle's the element's `display` CSS property based on the truthy-ness of the expression value.
1327
+
Conditionally render the elementbased on the truthy-ness of the expression value. The element and its contained directives / components are destroyed and re-constructed during toggles. If the element is a `<template>` element, its content will be extracted as the conditional block.
1305
1328
1306
1329
This directive triggers transitions when its condition changes.
@@ -1445,7 +1497,8 @@ All lifecycle hooks automatically have their `this` context bound to the instanc
1445
1497
-**Argument:**`attrOrProp (optional)`
1446
1498
1447
1499
-**Modifiers:**
1448
-
-`.prop` - Used for binding DOM attributes.
1500
+
-`.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))
1501
+
-`.camel` - transform the kebab-case attribute name into camelCase. (supported since 2.1.0)
1449
1502
1450
1503
-**Usage:**
1451
1504
@@ -1488,6 +1541,14 @@ All lifecycle hooks automatically have their `this` context bound to the instanc
1488
1541
<svg><a:xlink:special="foo"></a></svg>
1489
1542
```
1490
1543
1544
+
The `.camel` modifier allows camelizing a `v-bind` attribute name when using in-DOM templates, e.g. the SVG `viewBox` attribute:
1545
+
1546
+
```html
1547
+
<svg:view-box.camel="viewBox"></svg>
1548
+
```
1549
+
1550
+
`.camel` is not needed if you are using string templates, or compiling with `vue-loader`/`vueify`.
1551
+
1491
1552
-**See also:**
1492
1553
-[Class and Style Bindings](../guide/class-and-style.html)
@@ -1505,7 +1566,7 @@ All lifecycle hooks automatically have their `this` context bound to the instanc
1505
1566
-**Modifiers:**
1506
1567
-[`.lazy`](../guide/forms.html#lazy) - listen to `change` events instead of `input`
1507
1568
-[`.number`](../guide/forms.html#number) - cast input string to numbers
1508
-
-[`.trim`](/guild/forms.html#trim) - trim input
1569
+
-[`.trim`](../guide/forms.html#trim) - trim input
1509
1570
1510
1571
-**Usage:**
1511
1572
@@ -1760,6 +1821,10 @@ All lifecycle hooks automatically have their `this` context bound to the instanc
1760
1821
1761
1822
### keep-alive
1762
1823
1824
+
-**Props:**
1825
+
-`include` - string or RegExp. Only components matched by this will be cached.
1826
+
-`exclude` - string or RegExp. Any component matched by this will not be cached.
1827
+
1763
1828
-**Usage:**
1764
1829
1765
1830
When wrapped around a dynamic component, `<keep-alive>` caches the inactive component instances without destroying them. Similar to `<transition>`, `<keep-alive>` is an abstract component: it doesn't render a DOM element itself, and doesn't show up in the component parent chain.
@@ -1788,6 +1853,26 @@ All lifecycle hooks automatically have their `this` context bound to the instanc
1788
1853
</transition>
1789
1854
```
1790
1855
1856
+
-**`include` and `exclude`**
1857
+
1858
+
> New in 2.1.0
1859
+
1860
+
The `include` and `exclude` props allow components to be conditionally cached. Both props can either be a comma-delimited string or a RegExp:
1861
+
1862
+
```html
1863
+
<!-- comma-delimited string -->
1864
+
<keep-aliveinclude="a,b">
1865
+
<component:is="view"></component>
1866
+
</keep-alive>
1867
+
1868
+
<!-- regex (use v-bind) -->
1869
+
<keep-alive:include="/a|b/">
1870
+
<component:is="view"></component>
1871
+
</keep-alive>
1872
+
```
1873
+
1874
+
The match is first checked on the component's own `name` option, then its local registration name (the key in the parent's `components` option) if the `name` option is not available. Anonymous components cannot be matched against.
1875
+
1791
1876
<pclass="tip">`<keep-alive>` does not work with functional components because they do not have instances to be cached.</p>
Copy file name to clipboardExpand all lines: src/v2/guide/comparison.md
+1-2Lines changed: 1 addition & 2 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -77,7 +77,6 @@ If you're feeling lazy though, below are the numbers from one run in Chrome 52 o
77
77
<td>343ms</td>
78
78
<td>453ms</td>
79
79
</tr>
80
-
</tr>
81
80
</tbody>
82
81
</table>
83
82
{% endraw %}
@@ -90,7 +89,7 @@ This means updates in unoptimized Vue will be much faster than unoptimized React
90
89
91
90
#### In Development
92
91
93
-
While performance in production is the more important metrics as it is directly associated with end-user experience, performance in development still matters because it is associated with the developer experience.
92
+
While performance in production is the more important metric as it is directly associated with end-user experience, performance in development still matters because it is associated with the developer experience.
94
93
95
94
Both Vue and React remain fast enough in development for most normal applications. However, when prototyping high frame-rate data visualizations or animations, we've seen cases of Vue handling 10 frames per second in development while React dropping to about 1 frame per second.
0 commit comments