基于文本搜索创建/销毁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

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>

Answer 2

我不确定你想要实现什么，但是测试从两个组件https://codesandbox.io/s/8l0j43zy89创建的代码日志因为你实际上是有条件地显示相同的组件，所以我认为它不会被破坏。