海泰HIS前端开发文档

Appearance

目录

前端内存泄漏整理

前言

笔者说

前端内存泄漏会导致医务人员长时间使用后，页面变得卡顿，严重还会导致页面崩溃，如果奔溃时正在支付则会造成支付单边，必须重视该问题

ElForm + ElDatePicker 一起使用

示例

tsx
import { ElButton, ElDatePicker, ElForm, ElFormItem } from "element-plus";
import { defineComponent, ref } from "vue";

export default defineComponent({
  setup() {
    const show = ref(true);

    const isStart = ref(false);
    let timer: any = null;
    function start() {
      isStart.value = !isStart.value;
      if (isStart.value) {
        timer = setInterval(() => {
          show.value = !show.value;
        }, 100);
      } else {
        clearInterval(timer);
      }
    }

    return () => (
      <>
        <ElButton onClick={start} type={isStart.value ? "danger" : ""}>
          {isStart.value ? "结束测试" : "开始测试"}
        </ElButton>

        {show.value ? (
          <ElForm>
            <ElFormItem>
              <ElDatePicker
                style={{ width: "120px" }} // 这行代码会导致内存泄漏，去掉则正常
              ></ElDatePicker>
            </ElFormItem>
          </ElForm>
        ) : (
          ""
        )}
      </>
    );
  },
});

import { ElButton, ElDatePicker, ElForm, ElFormItem } from "element-plus";
import { defineComponent, ref } from "vue";

export default defineComponent({
  setup() {
    const show = ref(true);

    const isStart = ref(false);
    let timer: any = null;
    function start() {
      isStart.value = !isStart.value;
      if (isStart.value) {
        timer = setInterval(() => {
          show.value = !show.value;
        }, 100);
      } else {
        clearInterval(timer);
      }
    }

    return () => (
      <>
        <ElButton onClick={start} type={isStart.value ? "danger" : ""}>
          {isStart.value ? "结束测试" : "开始测试"}
        </ElButton>

        {show.value ? (
          <ElForm>
            <ElFormItem>
              <ElDatePicker
                style={{ width: "120px" }} // 这行代码会导致内存泄漏，去掉则正常
              ></ElDatePicker>
            </ElFormItem>
          </ElForm>
        ) : (
          ""
        )}
      </>
    );
  },
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

ElForm 的 rules 传入违规数据

示例

tsx
import { ElButton, ElForm, ElFormItem, ElInput } from "element-plus";
import { defineComponent, onMounted, ref } from "vue";

const Test3 = defineComponent({
  setup() {
    const zlRef = ref("");

    onMounted(() => {
      zlRef.value = "1"; // 修改值后会导致内存泄漏
    });

    const formRef = ref();
    return () => (
      <>
        <ElInput v-model={zlRef.value}></ElInput>
        {/* rules传入false会使内存泄漏 */}
        <ElForm ref={formRef} rules={false as any}>
          <ElFormItem></ElFormItem>
        </ElForm>
      </>
    );
  },
});

export default defineComponent({
  setup() {
    const show = ref(true);

    const isStart = ref(false);
    let timer: any = null;
    function start() {
      isStart.value = !isStart.value;
      if (isStart.value) {
        timer = setInterval(() => {
          show.value = !show.value;
        }, 100);
      } else {
        clearInterval(timer);
      }
    }

    return () => (
      <>
        <ElButton onClick={start} type={isStart.value ? "danger" : ""}>
          {isStart.value ? "结束测试" : "开始测试"}
        </ElButton>

        {show.value ? (
          <>
            <Test3></Test3>
          </>
        ) : (
          ""
        )}
      </>
    );
  },
});

import { ElButton, ElForm, ElFormItem, ElInput } from "element-plus";
import { defineComponent, onMounted, ref } from "vue";

const Test3 = defineComponent({
  setup() {
    const zlRef = ref("");

    onMounted(() => {
      zlRef.value = "1"; // 修改值后会导致内存泄漏
    });

    const formRef = ref();
    return () => (
      <>
        <ElInput v-model={zlRef.value}></ElInput>
        {/* rules传入false会使内存泄漏 */}
        <ElForm ref={formRef} rules={false as any}>
          <ElFormItem></ElFormItem>
        </ElForm>
      </>
    );
  },
});

export default defineComponent({
  setup() {
    const show = ref(true);

    const isStart = ref(false);
    let timer: any = null;
    function start() {
      isStart.value = !isStart.value;
      if (isStart.value) {
        timer = setInterval(() => {
          show.value = !show.value;
        }, 100);
      } else {
        clearInterval(timer);
      }
    }

    return () => (
      <>
        <ElButton onClick={start} type={isStart.value ? "danger" : ""}>
          {isStart.value ? "结束测试" : "开始测试"}
        </ElButton>

        {show.value ? (
          <>
            <Test3></Test3>
          </>
        ) : (
          ""
        )}
      </>
    );
  },
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58