Создание / уничтожение компонента Vue на основе текстового поиска

Question

У меня есть следующее в App.vue

<template>
    <div id="app">
        <input type="text" v-model="term">
        <hello-world text="Button 1" v-if="term === ''"></hello-world>
        <hello-world v-else text="Button 2"></hello-world>
    </div>
</template>

<script>
import HelloWorld from '@/components/HelloWorld'

export default {
    name: 'app',
    data() {
        return {
            term: ''
        }
    },
    components: {
        HelloWorld
    }
}
</script>

А вот HelloWorld.vue:

<template>
    <div>
        <button>{{ text }}</button>
    </div>
</template>

<script>
export default {
    props: {
        text: String
    },
    created() {
        console.log('Created')
    },
    destroyed() {
        console.log('Destroyed')
    }
}
</script>

Итак, когда я что-то печатаю, первый компонент должен быть уничтожен иВторой компонент должен быть создан.Однако ничего подобного не происходит.Компонент не уничтожается и не создается.

Как будто v-if не вызвал функцию created() & destroyed().Пожалуйста, помогите мне с этим.

Answer 1

Я не уверен, что вы пытаетесь достичь, но тестируете журналы кода, созданные из обоих компонентов https://codesandbox.io/s/8l0j43zy89 Поскольку вы фактически показываете условно один и тот же компонент, я не думаю, что он будет уничтожен.

Answer 2

Vue использует виртуальный подход к DOM.Таким образом, он сравнивает виртуальное дерево и не идентифицирует изменения в структуре (oldNode.type === newNode.type).Когда это происходит, Vue обновляет тот же компонент вместо того, чтобы разрушать старый узел и создавать новый.

Попробуйте заставить Vue обнаруживать изменения виртуального дерева, избегая использования братьев и сестер с тем же именем тега и контролируемых v-ifдиректива.

Ссылка:

https://medium.com/@deathmood/how-to-write-your-own-virtual-dom-ee74acc13060

Vue.component('hello-world', {
  props: {
    text: String
  },
  created() {
    console.log('Created')
  },
  destroyed() {
    console.log('Destroyed')
  },
  template: "<button>{{ text }}</button>"
});

var app = new Vue({
  el: "#app",
  data() {
    return {
      term: ''
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <input type="text" v-model="term">
  <span><hello-world v-if="!term" text="Button 1"></hello-world></span>
  <span><hello-world v-if="term" text="Button 2"></hello-world></span>
</div>