fix(GroupRanking): 添加组件卸载状态检查防止内存泄漏
在组件卸载时添加状态标记,避免组件卸载后仍执行图表更新操作导致内存泄漏
This commit is contained in:
@@ -27,6 +27,9 @@ const props = defineProps({
|
||||
}
|
||||
})
|
||||
|
||||
// 组件状态跟踪
|
||||
let isComponentMounted = true
|
||||
|
||||
// Chart.js 实例
|
||||
const chartInstances = {}
|
||||
|
||||
@@ -41,13 +44,15 @@ const funnelData = reactive({
|
||||
|
||||
// 监听teamSalesFunnel变化并更新图表数据
|
||||
watch(() => props.teamSalesFunnel, (newVal) => {
|
||||
if (newVal && Object.keys(newVal).length > 0) {
|
||||
if (newVal && Object.keys(newVal).length > 0 && isComponentMounted) {
|
||||
// 按照固定顺序提取数据
|
||||
const order = ['线索', '加微', '到课', '定金', '成交']
|
||||
funnelData.data = order.map(key => newVal[key] || 0)
|
||||
// 确保在DOM更新后再更新图表
|
||||
nextTick(() => {
|
||||
renderPersonalFunnelChart()
|
||||
if (isComponentMounted) {
|
||||
renderPersonalFunnelChart()
|
||||
}
|
||||
})
|
||||
}
|
||||
}, { deep: true })
|
||||
@@ -89,15 +94,19 @@ const renderPersonalFunnelChart = () => {
|
||||
|
||||
// 生命周期钩子
|
||||
onMounted(() => {
|
||||
isComponentMounted = true
|
||||
// 处理初始传入的teamSalesFunnel数据
|
||||
if (props.teamSalesFunnel && Object.keys(props.teamSalesFunnel).length > 0) {
|
||||
const order = ['线索', '加微', '到课', '定金', '成交']
|
||||
funnelData.data = order.map(key => props.teamSalesFunnel[key] || 0)
|
||||
}
|
||||
renderPersonalFunnelChart()
|
||||
if (isComponentMounted) {
|
||||
renderPersonalFunnelChart()
|
||||
}
|
||||
})
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
isComponentMounted = false
|
||||
Object.values(chartInstances).forEach(chart => chart.destroy())
|
||||
})
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user