From f1502e946891dcd1eb2debc602f1c3d9d99be7c4 Mon Sep 17 00:00:00 2001
From: Alex Liu <dsa1314@gmail.com>
Date: Sun, 17 Mar 2024 08:42:00 +0800
Subject: [PATCH] perf: educe the unnecessary use of `ref` (#526)

Co-authored-by: Sanjay Soundarajan <sanjay.16@live.com>
---
 packages/vue3-lottie/src/vue3-lottie.vue | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/vue3-lottie/src/vue3-lottie.vue b/packages/vue3-lottie/src/vue3-lottie.vue
index 2018acea..1e9c8ab0 100644
--- a/packages/vue3-lottie/src/vue3-lottie.vue
+++ b/packages/vue3-lottie/src/vue3-lottie.vue
@@ -112,9 +112,9 @@ export default defineComponent({
   },
 
   setup(props, { emit: emits }) {
-    const animationData = ref<any>()
     const lottieAnimationContainer = ref<HTMLDivElement>()
 
+    let animationData: any
     let lottieAnimation: AnimationItem | null = null
     let direction: AnimationDirection = 1
 
@@ -131,14 +131,14 @@ export default defineComponent({
 
           const responseJSON = await response.json()
 
-          animationData.value = responseJSON
+          animationData = responseJSON
         } catch (error) {
           console.error(error)
           return
         }
       } else if (isEqual(props.animationData, {}) === false) {
         // clone the animationData to prevent it from being mutated
-        animationData.value = cloneDeep(props.animationData)
+        animationData = cloneDeep(props.animationData)
       } else {
         throw new Error(
           'You must provide either animationLink or animationData',
@@ -153,7 +153,7 @@ export default defineComponent({
       if (!lottieAnimationContainer.value) return
 
       // check if the animationData has been loaded
-      if (!animationData.value) return
+      if (!animationData) return
 
       // destroy the animation if it already exists
       lottieAnimation?.destroy()
@@ -187,7 +187,7 @@ export default defineComponent({
         renderer: props.renderer,
         loop: loop,
         autoplay: autoPlay,
-        animationData: animationData.value,
+        animationData: animationData,
         assetsPath: props.assetsPath,
       }