a

src/components/BgMusic.vue

 <template>
-  <div class="bg-music" :class="{ ['icon-playing']: playing }" @click="handleClick" v-show="show">
-    <audio :src="url" ref="audioRef" loop @loadedmetadata="show = true" @play="handlePlay"></audio>
+  <div
+    class="bg-music"
+    :class="{ ['icon-playing']: playing }"
+    @click="handleClick"
+    v-show="data.value.show"
+  >
+    <audio
+      :src="data.value.url"
+      ref="audioRef"
+      loop
+      @loadedmetadata="data.value.show = true"
+      @play="handlePlay"
+    ></audio>
   </div>
 </template>
 
+
+
 <script>
+import { onMounted, ref } from 'vue'
+
 export default {
-  name: 'BgMusic',
-  data() {
+  setup() {
     const { origin, pathname } = window.location
 
-    return {
+    let data = ref({
       show: false,
       playing: false,
       url: `${origin}${pathname}music/bg.mp3`
-    }
-  },
-  mounted() {
-    document.body.addEventListener('click', this.handleClick)
+    })
+
+    onMounted(() => {
+      document.body.addEventListener('click', this.handleClick)
 
-    this.$nextTick(() => {
-      this.handleIOSAudio()
+      this.$nextTick(() => {
+        this.handleIOSAudio()
+      })
     })
-  },
-  methods: {
-    handleIOSAudio() {
+
+    const handleIOSAudio = () => {
       const isiOS = !!navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)
       if (isiOS) {
         document.addEventListener(
           false
         )
       }
-    },
-    handleClick() {
+    }
+    const handleClick = () => {
       if (!this.show || !this.$refs.audioRef) return
 
       if (this.playing) {
       }
 
       this.playing = !this.playing
-    },
+    }
 
-    handlePlay() {
+    const handlePlay = () => {
       document.body.removeEventListener('click', this.handleClick)
     }
+
+    return {
+      data,
+      handleIOSAudio,
+      handleClick,
+      handlePlay
+    }
   }
 }
 </script>
 
+
 <style lang="less" scoped>
 .bg-music {
   position: fixed;