Vuejs - 使用 v-if

Question

问题

我有一个子组件，它可能存在也可能不存在于带有

v-if

的页面上。尝试在用户单击其他内容时将其缓存起来，以便无论我如何尝试使用

<keep-alive>

.

进行缓存，当用户返回时搜索词和诸如此类的东西都会再次出现

我试过的

documentation 似乎表明我需要做的就是将我的组件包装在

<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

，只是更改通过字符串呈现的组件....

附言除了 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/[email protected]/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

本身被破坏，那么该缓存将丢失。