Vuejs - 使用 v-if 切换的保持活动组件

Question

###问题我有一个子组件，它可能存在也可能不存在于带有v-if的页面上。 尝试在用户单击其他内容时将其保持缓存，以便在用户返回时再次显示搜索词和其他内容失败，无论我如何尝试使用<keep-alive>进行缓存。

###我尝试过的文档似乎表明我需要做的就是将我的组件包装在一个<keep-alive>标记中，并且事情应该可以正常工作。 我尝试匹配一些使用明显不起作用的<component>标记的文档。 我也尝试使用include道具，因为只是包装它不起作用。

 Vue.component('child', { template: '<div>child: {{text}}<div>', data() {return {text: ""}}, created(){ this.$nextTick(() => { this.text = `${Math.round(Math.random() * 100)}` }) }, activated: function() { this.$nextTick(() => { console.log('in activated'); }); } }) var vm = new Vue({ el: '#app', data: function() { return { showNow:false, message: 'This is a test.' } }, methods: { changeText: function() { this.message = 'changed'; }, toggle() { this.showNow = !this.showNow } }, });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script> <div id="app"> <keep-alive include="child"> <div v-if="showNow"> <h4>Title of section to be toggled</h4> <component is="child"></component> </div> </keep-alive> <button @click="toggle()">toggle child</button> </div>

我也尝试过不使用include ，而只是像这样<keep-alive><child></child></keep-alive>或使用<component>语法进行包装，但这些都不起作用。

如果删除条件渲染，则会调用activated的钩子，但这显然违背了<keep-alive>的目的！ 就目前而言，该钩子永远不会被调用，这令人沮丧。

此外，文档中的示例也无济于事，因为它们没有使用v-if ，只是更改了通过字符串呈现的组件......

PS 除了 Vue.js，我不知道如何标记它

Answer 1

这是您的代码的轻微修改版本， keep-alive正常工作：

 Vue.component('child', { template: '<div>child: {{text}}</div>', data() {return {text: ""}}, created(){ console.log('in created') this.$nextTick(() => { this.text = `${Math.round(Math.random() * 100)}` }) }, activated: function() { this.$nextTick(() => { console.log('in activated'); }); } }) var vm = new Vue({ el: '#app', data: function() { return { showNow:false, message: 'This is a test.' } }, methods: { changeText: function() { this.message = 'changed'; }, toggle() { this.showNow = !this.showNow } }, });

 <script src="https://unpkg.com/vue@2.6.11/dist/vue.js"></script> <div id="app"> <keep-alive> <child v-if="showNow"></child> </keep-alive> <button @click="toggle()">toggle child</button> </div>

created的钩子只在第一次被调用。 在随后的激活中， activated的钩子被调用但未被created 。

关键的变化是<child>组件必须是<keep-alive>的直接子级。 这个直接子元素也必须是具有v-if的组件。

您不能将<div>用于此目的，因为<keep-alive>专门寻找一个组件，而不仅仅是一个元素。 看：

https://github.com/vuejs/vue/blob/ec78fc8b6d03e59da669be1adf4b4b5abf670a34/src/core/components/keep-alive.js#L85

keep-alive的另一个常见错误是将v-if放在keep-alive组件本身或其祖先之一上。 这将不起作用，因为keep-alive组件本身将被破坏。 keep-alive组件维护子组件的缓存，但如果keep-alive本身被破坏，则该缓存将丢失。