update vue3

packages/artplayer-template/vue3.js/src/Artplayer.vue

@@ -2,35 +2,35 @@
     <div ref="artRef"></div>
 </template>
 
-<script>
+<script setup>
 import Artplayer from 'artplayer';
+import { ref, onMounted, onBeforeUnmount, nextTick } from 'vue';
 
-export default {
+const emit = defineEmits(['get-instance']);
-    data() {
+
-        return {
+const props = defineProps({
-            instance: null,
-        };
-    },
-    props: {
     option: {
         type: Object,
         required: true,
     },
-    },
+});
-    mounted() {
-        this.instance = new Artplayer({
-            ...this.option,
-            container: this.$refs.artRef,
-        });
 
-        this.$nextTick(() => {
+const instance = ref(null);
-            this.$emit('get-instance', this.instance);
+const artRef = ref(null);
+
+onMounted(() => {
+    instance.value = new Artplayer({
+        ...props.option,
+        container: artRef.value,
     });
-    },
+    nextTick(() => {
-    beforeUnmount() {
+        emit('get-instance', instance.value);
-        if (this.instance && this.instance.destroy) {
+    });
-            this.instance.destroy(false);
+});
+
+onBeforeUnmount(() => {
+    if (instance.value) {
+        instance.value.destroy(false);
     }
-    },
+});
-};
 </script>