<link rel="stylesheet prefetch"  rel="external nofollow" >
<script src="https://joshuajohnson.co.uk/Choices/assets/scripts/dist/choices.min.js?version=3.0.3"></script>
<div id="app">
  <button
    v-if="showChoices"
    @click="hide"
  >Hide</button>
  <button
    v-if="!showChoices"
    @click="show"
  >Show</button>
  <div v-if="showChoices">
    <select id="choices-single-default"></select>
  </div>
</div>

new Vue({
  el: "#app",
  data: function () {
    return {
      showChoices: true
    }
  },
  mounted: function () {
    this.initializeChoices()
  },
  methods: {
    initializeChoices: function () {
      let list = []
      // 我們來為選擇框載入很多選項(xiàng)
      // 這樣的話它會(huì)占用大量的內(nèi)存
      for (let i = 0; i < 1000; i++) {
        list.push({
          label: "Item " + i,
          value: i
        })
      }
      new Choices("#choices-single-default", {
        searchEnabled: true,
        removeItemButton: true,
        choices: list
      })
    },
    show: function () {
      this.showChoices = true
      this.$nextTick(() => {
        this.initializeChoices()
      })
    },
    hide: function () {
      this.showChoices = false
    }
  }
})

new Vue({
  el: "#app",
  data: function () {
    return {
      showChoices: true,
      choicesSelect: null
    }
  },
  mounted: function () {
    this.initializeChoices()
  },
  methods: {
    initializeChoices: function () {
      let list = []
      for (let i = 0; i < 1000; i++) {
        list.push({
          label: "Item " + i,
          value: i
        })
      }
      // 在我們的 Vue 實(shí)例的數(shù)據(jù)對(duì)象中設(shè)置一個(gè) `choicesSelect` 的引用
      this.choicesSelect = new Choices("#choices-single-default", {
        searchEnabled: true,
        removeItemButton: true,
        choices: list
      })
    },
    show: function () {
      this.showChoices = true
      this.$nextTick(() => {
        this.initializeChoices()
      })
    },
    hide: function () {
      // 現(xiàn)在我們可以讓 Choices 使用這個(gè)引用
      // 在從 DOM 中移除這些元素之前進(jìn)行清理工作
      this.choicesSelect.destroy()
      this.showChoices = false
    }
  }
})

beforeDestroy: function(){
    this.choicesSelect.destroy()
}

<button @click="show = false">Hide</button>
<keep-alive>
  <!-- `<my-component>` 即便被刪除仍會(huì)刻意保留在內(nèi)存里 -->
  <my-component v-if="show"></my-component>
</keep-alive>

deactivated: function () {
  // 移除任何你不想保留的數(shù)據(jù)
}