Блог

Я пытаюсь сделать что-то очень простое, но почему-то это не работает. Когда компонент удаляется, я хочу удалить evenListener, но почему-то это не работает. Может ли кто-нибудь указать мне правильное направление?

Вот упрощенная версия моего компонента:

 <template>
  <child-component :dark="darkModeEnabled" />
</template>

<script>
export default {
  data () {
    return {
      darkModeEnabled: window.matchMedia('(prefers-color-scheme: dark)').matches
    }
  },
  mounted () {
    this.$nextTick(() => {
      window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', this.setDarkMode)
    })
  },
  beforeDestroy () {
    window.matchMedia('(prefers-color-scheme: dark)').removeEventListener('change', this.setDarkMode)
  },
  methods: {
    setDarkMode ({ matches }) {
      this.darkModeEnabled = matches
    }
  }
}
</script>```
  

Ваш код не работает, потому что вы добавляете и удаляете разные MediaQueryList объекты.

 ...
  mounted () {
    this.mediaQueryList = window.matchMedia('(prefers-color-scheme: dark)')
    this.$nextTick(() => {
      this.mediaQueryList.addEventListener('change', this.setDarkMode)
    })
  },

  beforeDestroy () {
    this.mediaQueryList.removeEventListener('change', this.setDarkMode)
  }
...
  

JSFiddle