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
<p>When wrapped around a dynamic component, <code><keep-alive></code> caches the inactive component instances without destroying them. Similar to <code><transition></code>, <code><keep-alive></code> is an abstract component: it doesn’t render a DOM element itself, and doesn’t show up in the component parent chain.</p>
1276
+
<p>When a component is toggled inside <code><keep-alive></code>, its <code>activated</code> and <code>deactivated</code> lifecycle hooks will be invoked accordingly.</p>
1276
1277
<p>Primarily used with preserve component state or avoid re-rendering.</p>
1277
1278
<figureclass="highlight html"><table><tr><tdclass="code"><pre><divclass="line"><spanclass="comment"><!-- basic --></span></div><divclass="line"><spanclass="tag"><<spanclass="name">keep-alive</span>></span></div><divclass="line"><spanclass="tag"><<spanclass="name">component</span><spanclass="attr">:is</span>=<spanclass="string">"view"</span>></span><spanclass="tag"></<spanclass="name">component</span>></span></div><divclass="line"><spanclass="tag"></<spanclass="name">keep-alive</span>></span></div><divclass="line"></div><divclass="line"><spanclass="comment"><!-- multiple conditional children --></span></div><divclass="line"><spanclass="tag"><<spanclass="name">keep-alive</span>></span></div><divclass="line"><spanclass="tag"><<spanclass="name">comp-a</span><spanclass="attr">v-if</span>=<spanclass="string">"a > 1"</span>></span><spanclass="tag"></<spanclass="name">comp-a</span>></span></div><divclass="line"><spanclass="tag"><<spanclass="name">comp-b</span><spanclass="attr">v-else</span>></span><spanclass="tag"></<spanclass="name">comp-b</span>></span></div><divclass="line"><spanclass="tag"></<spanclass="name">keep-alive</span>></span></div><divclass="line"></div><divclass="line"><spanclass="comment"><!-- used together with <transition> --></span></div><divclass="line"><spanclass="tag"><<spanclass="name">transition</span>></span></div><divclass="line"><spanclass="tag"><<spanclass="name">keep-alive</span>></span></div><divclass="line"><spanclass="tag"><<spanclass="name">component</span><spanclass="attr">:is</span>=<spanclass="string">"view"</span>></span><spanclass="tag"></<spanclass="name">component</span>></span></div><divclass="line"><spanclass="tag"></<spanclass="name">keep-alive</span>></span></div><divclass="line"><spanclass="tag"></<spanclass="name">transition</span>></span></div></pre></td></tr></table></figure>
1279
+
<pclass="tip"><code><keep-alive></code> does not work with functional components because they do not have instances to be cached.</p>
<h3id="keep-alive"><ahref="#keep-alive" class="headerlink" title="keep-alive"></a><code>keep-alive</code></h3><p>If you want to keep the switched-out components in memory so that you can preserve their state or avoid re-rendering, you can wrap a dynamic component in a <code>keep-alive</code> element:</p>
672
+
<h3id="keep-alive"><ahref="#keep-alive" class="headerlink" title="keep-alive"></a><code>keep-alive</code></h3><p>If you want to keep the switched-out components in memory so that you can preserve their state or avoid re-rendering, you can wrap a dynamic component in a <code><keep-alive></code> element:</p>
673
673
<figureclass="highlight html"><table><tr><tdclass="code"><pre><divclass="line"><spanclass="tag"><<spanclass="name">keep-alive</span>></span></div><divclass="line"><spanclass="tag"><<spanclass="name">component</span><spanclass="attr">:is</span>=<spanclass="string">"currentView"</span>></span></div><divclass="line"><spanclass="comment"><!-- inactive components will be cached! --></span></div><divclass="line"><spanclass="tag"></<spanclass="name">component</span>></span></div><divclass="line"><spanclass="tag"></<spanclass="name">keep-alive</span>></span></div></pre></td></tr></table></figure>
674
+
<p>Check out more details on <code><keep-alive></code> in the <ahref="/api/#keep-alive">API reference</a>.</p>
674
675
<h2id="Misc"><ahref="#Misc" class="headerlink" title="Misc"></a>Misc</h2><h3id="Authoring-Reusable-Components"><ahref="#Authoring-Reusable-Components" class="headerlink" title="Authoring Reusable Components"></a>Authoring Reusable Components</h3><p>When authoring components, it’s good to keep in mind whether you intend to reuse it somewhere else later. It’s OK for one-off components to be tightly coupled, but reusable components should define a clean public interface and make no assumptions about the context it’s used in.</p>
675
676
<p>The API for a Vue component comes in three parts - props, events, and slots:</p>
Copy file name to clipboardExpand all lines: guide/migration.html
+6-6Lines changed: 6 additions & 6 deletions
Original file line number
Diff line number
Diff line change
@@ -434,14 +434,14 @@ <h4>Upgrade Path</h4>
434
434
<p>Run the <ahref="https://github.com/vuejs/vue-migration-helper" target="_blank" rel="external">migration helper</a> on your codebase to find all examples of this hook.</p>
435
435
</div>
436
436
437
-
<h2id="v-for"><ahref="#v-for" class="headerlink" title="v-for"></a><code>v-for</code></h2><h3id="v-for-Argument-Order-for-Arrays"><ahref="#v-for-Argument-Order-for-Arrays" class="headerlink" title="v-for Argument Order for Arrays"></a><code>v-for</code> Argument Order for Arrays</h3><p>When including an <code>index</code>, the argument order for arrays used to be <code>(index, value)</code>. It is now <code>(value, index)</code> to be more consisent with JavaScript’s native array methods such as <code>forEach</code> and <code>map</code>.</p>
437
+
<h2id="v-for"><ahref="#v-for" class="headerlink" title="v-for"></a><code>v-for</code></h2><h3id="v-for-Argument-Order-for-Arrays"><ahref="#v-for-Argument-Order-for-Arrays" class="headerlink" title="v-for Argument Order for Arrays"></a><code>v-for</code> Argument Order for Arrays</h3><p>When including an <code>index</code>, the argument order for arrays used to be <code>(index, value)</code>. It is now <code>(value, index)</code> to be more consistent with JavaScript’s native array methods such as <code>forEach</code> and <code>map</code>.</p>
438
438
439
439
<divclass="upgrade-path">
440
440
<h4>Upgrade Path</h4>
441
441
<p>Run the <ahref="https://github.com/vuejs/vue-migration-helper" target="_blank" rel="external">migration helper</a> on your codebase to find examples of the deprecated argument order. Note that if you name your index arguments something unusual like <code>position</code> or <code>num</code>, the helper will not flag them.</p>
442
442
</div>
443
443
444
-
<h3id="v-for-Argument-Order-for-Objects"><ahref="#v-for-Argument-Order-for-Objects" class="headerlink" title="v-for Argument Order for Objects"></a><code>v-for</code> Argument Order for Objects</h3><p>When including a <code>key</code>, the argument order for objects used to be <code>(key, value)</code>. It is now <code>(value, key)</code> to be more consisent with common object iterators such as lodash’s.</p>
444
+
<h3id="v-for-Argument-Order-for-Objects"><ahref="#v-for-Argument-Order-for-Objects" class="headerlink" title="v-for Argument Order for Objects"></a><code>v-for</code> Argument Order for Objects</h3><p>When including a <code>key</code>, the argument order for objects used to be <code>(key, value)</code>. It is now <code>(value, key)</code> to be more consistent with common object iterators such as lodash’s.</p>
445
445
446
446
<divclass="upgrade-path">
447
447
<h4>Upgrade Path</h4>
@@ -606,7 +606,7 @@ <h4>Upgrade Path</h4>
606
606
<p>Run the <ahref="https://github.com/vuejs/vue-migration-helper" target="_blank" rel="external">migration helper</a> on your codebase to find examples of the these deprecated param attributes.</p>
607
607
</div>
608
608
609
-
<h3id="v-model-with-Inline-value-deprecated"><ahref="#v-model-with-Inline-value-deprecated" class="headerlink" title="v-model with Inline value deprecated"></a><code>v-model</code> with Inline <code>value</code><sup>deprecated</sup></h3><p><code>v-model</code> no longer cares about initial value of an inline <code>value</code> attribute. For predictability, it will instead always treat the Vue instance data as the source of truth.</p>
609
+
<h3id="v-model-with-Inline-value-deprecated"><ahref="#v-model-with-Inline-value-deprecated" class="headerlink" title="v-model with Inline value deprecated"></a><code>v-model</code> with Inline <code>value</code><sup>deprecated</sup></h3><p><code>v-model</code> no longer cares about the initial value of an inline <code>value</code> attribute. For predictability, it will instead always treat the Vue instance data as the source of truth.</p>
<p>Run the <ahref="https://github.com/vuejs/vue-migration-helper" target="_blank" rel="external">migration helper</a> on your codebase to find examples of style bindings with <code>!important</code> in objects.</p>
644
644
</div>
645
645
646
-
<h3id="v-el-and-v-ref-deprecated"><ahref="#v-el-and-v-ref-deprecated" class="headerlink" title="v-el and v-ref deprecated"></a><code>v-el</code> and <code>v-ref</code><sup>deprecated</sup></h3><p>For simplicity, <code>v-el</code> and <code>v-ref</code> have been merged into the <code>ref</code> attribute, accessable on a component instance via <code>$refs</code>. That means <code>v-el:my-element</code> would become <code>ref="myElement"</code> and <code>v-ref:my-component</code> would become <code>ref="myComponent"</code>. When used on a normal element, the <code>ref</code> will be the DOM element, and when used on a component, the <code>ref</code> will be the component instance.</p>
646
+
<h3id="v-el-and-v-ref-deprecated"><ahref="#v-el-and-v-ref-deprecated" class="headerlink" title="v-el and v-ref deprecated"></a><code>v-el</code> and <code>v-ref</code><sup>deprecated</sup></h3><p>For simplicity, <code>v-el</code> and <code>v-ref</code> have been merged into the <code>ref</code> attribute, accessible on a component instance via <code>$refs</code>. That means <code>v-el:my-element</code> would become <code>ref="myElement"</code> and <code>v-ref:my-component</code> would become <code>ref="myComponent"</code>. When used on a normal element, the <code>ref</code> will be the DOM element, and when used on a component, the <code>ref</code> will be the component instance.</p>
647
647
<p>Since <code>v-ref</code> is no longer a directive, but a special attribute, it can also be dynamically defined. This is especially useful in combination with <code>v-for</code>. For example:</p>
648
648
<figureclass="highlight html"><table><tr><tdclass="code"><pre><divclass="line"><spanclass="tag"><<spanclass="name">p</span><spanclass="attr">v-for</span>=<spanclass="string">"item in items"</span><spanclass="attr">v-bind:ref</span>=<spanclass="string">"'item' + item.id"</span>></span><spanclass="tag"></<spanclass="name">p</span>></span></div></pre></td></tr></table></figure>
649
649
<p>Previously, <code>v-el</code>/<code>v-ref</code> combined with <code>v-for</code> would produce an array of elements/components, because there was no way to give each item a unique name. You can still achieve this behavior by given each item the same <code>ref</code>:</p>
@@ -702,7 +702,7 @@ <h4>Upgrade Path</h4>
702
702
<p>Run the <ahref="https://github.com/vuejs/vue-migration-helper" target="_blank" rel="external">migration helper</a> on your codebase to find examples of the the old <code>keyCode</code> configuration syntax.</p>
703
703
</div>
704
704
705
-
<h3id="dispatch-and-broadcast-deprecated"><ahref="#dispatch-and-broadcast-deprecated" class="headerlink" title="$dispatch and $broadcast deprecated"></a><code>$dispatch</code> and <code>$broadcast</code><sup>deprecated</sup></h3><p><code>$dispatch</code> and <code>$broadcast</code> are being deprecated in favor of more explicity cross-component communication and more maintainable state management solutions, such as <ahref="https://github.com/vuejs/vuex" target="_blank" rel="external">Vuex</a>.</p>
705
+
<h3id="dispatch-and-broadcast-deprecated"><ahref="#dispatch-and-broadcast-deprecated" class="headerlink" title="$dispatch and $broadcast deprecated"></a><code>$dispatch</code> and <code>$broadcast</code><sup>deprecated</sup></h3><p><code>$dispatch</code> and <code>$broadcast</code> are being deprecated in favor of more explicitly cross-component communication and more maintainable state management solutions, such as <ahref="https://github.com/vuejs/vuex" target="_blank" rel="external">Vuex</a>.</p>
706
706
<p>The problem is event flows that depend on a component’s tree structure can be hard to reason about and very brittle when the tree becomes large. It simply doesn’t scale well and we don’t want to set you up for pain later. <code>$dispatch</code> and <code>$broadcast</code> also do not solve communication between sibling components.</p>
707
707
<p>For the simplest possible upgrade from <code>$dispatch</code> and <code>$broadcast</code>, you can use a centralized event hub that allows components to communicate no matter where they are in the component tree. Because Vue instances implement an event emitter interface, you can actually use an empty Vue instance for this purpose.</p>
708
708
<p>For example, let’s say we have a todo app structured like this:</p>
<p>With JavaScript’s native <code>.filter</code>, it’s also manage much more complex filtering operations, because you have access to the full power of JavaScript within computed properties. For example, if you wanted to find all active users and case-insensitively match against both their name and email:</p>
742
+
<p>JavaScript’s native <code>.filter</code> can also manage much more complex filtering operations, because you have access to the full power of JavaScript within computed properties. For example, if you wanted to find all active users and case-insensitively match against both their name and email:</p>
<h4id="Replacing-the-orderBy-Filter"><ahref="#Replacing-the-orderBy-Filter" class="headerlink" title="Replacing the orderBy Filter"></a>Replacing the <code>orderBy</code> Filter</h4><p>Instead of:</p>
745
745
<figureclass="highlight html"><table><tr><tdclass="code"><pre><divclass="line"><spanclass="tag"><<spanclass="name">p</span><spanclass="attr">v-for</span>=<spanclass="string">"user in users | orderBy 'name'"</span>></span>{{ user.name }}<spanclass="tag"></<spanclass="name">p</span>></span></div></pre></td></tr></table></figure>
0 commit comments