From aaf89c556bebf6d6bc8421428267a29fc9bb564a Mon Sep 17 00:00:00 2001
From: lhlyu <misakafs@gmail.com>
Date: Thu, 22 Aug 2024 22:57:53 +0800
Subject: [PATCH] upgrade

---
 CHANGELOG.md                                   |  2 +-
 package.json                                   | 18 +++++++++---------
 .../virtual-waterfall.vue                      |  6 +++---
 3 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index cd7a390..491a7a0 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,7 +2,7 @@
 
 ### chore
 
-- update dependencies | 更新依赖
+- upgrade dependencies | 升级依赖
 
 ## 1.0.5
 
diff --git a/package.json b/package.json
index be37d4f..2f96350 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@lhlyu/vue-virtual-waterfall",
   "description": "vue3 virtual waterfall component",
-  "version": "1.0.6-beta.3",
+  "version": "1.0.6-beta.4",
   "author": "lhlyu",
   "repository": {
     "type": "git",
@@ -34,20 +34,20 @@
     "package.json"
   ],
   "dependencies": {
-    "@vueuse/core": "^10.11.0"
+    "@vueuse/core": "^11.0.1"
   },
   "devDependencies": {
-    "@vitejs/plugin-vue": "^5.1.1",
-    "autoprefixer": "^10.4.19",
-    "cssnano": "^7.0.4",
-    "postcss": "^8.4.40",
+    "@vitejs/plugin-vue": "^5.1.2",
+    "autoprefixer": "^10.4.20",
+    "cssnano": "^7.0.5",
+    "postcss": "^8.4.41",
     "prettier": "^3.3.3",
     "prettier-plugin-rational-order": "^1.0.3",
     "sass": "^1.77.8",
     "typescript": "^5.5.4",
-    "vite": "^5.3.5",
-    "vite-plugin-dts": "4.0.0-beta.1",
-    "vue": "^3.4.34",
+    "vite": "^5.4.2",
+    "vite-plugin-dts": "4.0.3",
+    "vue": "^3.4.38",
     "vue-tsc": "^2.0.29"
   }
 }
diff --git a/src/vue-virtual-waterfall/virtual-waterfall.vue b/src/vue-virtual-waterfall/virtual-waterfall.vue
index 39cb77e..f96ceaf 100644
--- a/src/vue-virtual-waterfall/virtual-waterfall.vue
+++ b/src/vue-virtual-waterfall/virtual-waterfall.vue
@@ -30,7 +30,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, onMounted, ref, watchEffect } from 'vue'
+import { computed, onMounted, ref, shallowRef, watchEffect } from 'vue'
 import { useElementBounding, useElementSize } from '@vueuse/core'
 
 defineOptions({
@@ -134,7 +134,7 @@ interface SpaceOption {
 }
 
 // 计算每个item占据的空间
-const itemSpaces = ref<SpaceOption[]>([])
+const itemSpaces = shallowRef<SpaceOption[]>([])
 
 watchEffect(() => {
     if (!columnCount.value) {
@@ -215,7 +215,7 @@ const itemRenderList = computed<SpaceOption[]>(() => {
         const t = v.top
         const b = v.bottom
         // 这里的逻辑是：
-        // 只要元素部分出现在容器里就算作可见，因此有三段判断:
+        // 只要元素部分出现在可视区域里就算作可见，因此有三段判断:
         // 1. 元素的上边界在容器内
         // 2. 元素的下边界在容器内
         // 3. 元素覆盖了整个容器