Vuejs - компонент keep-alive переключается с помощью v-if - PullRequest
Новая
       42

Vuejs - компонент keep-alive переключается с помощью v-if

1 голос
/ 20 января 2020

Проблема

У меня есть дочерний компонент, который может существовать или не существовать на странице с 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

Ответы [ 2 ]

1 голос
/ 21 января 2020

Вот слегка измененная версия вашего кода с 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 уничтожен, то этот кэш теряется.

0 голосов
/ 21 января 2020

Welp, в соответствии с проблемой Github, зарегистрированной с помощью Vue, через некоторое время go, это ожидаемое поведение.

https://github.com/vuejs/vue/issues/8117

...