是否可以在 Vue 中删除 prefers-color-scheme 事件侦听器？

Question

我尝试做一些非常简单的事情，但不知何故它不起作用。当一个组件被删除时，我想删除 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>```

Answer 1

您的代码无法正常工作，因为您在不同的 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

是否可以在 Vue 中删除 prefers-color-scheme 事件侦听器？

Is it possible to remove a prefers-color-scheme event listener in Vue?

vue.js

removeeventlistener