1
<script setup>
2
  import { ref } from "vue";
3

4
  const messageShow = ref(false);
5

6
  function showMessage(text) {
7
    messageShow.value = true;
8
  }
9

10
  function closeMessage() {
11
    messageShow.value = false;
12
  }
13

14
  defineProps({
15
    message: String,
16
    close: {
17
      type: Function,
18
      default: () => {
19
        messageShow.value = false;
20
      },
21
    },
22
  });
23

24
</script>
25
<template>
26
  <div v-if="messageShow">{{ message }}</div>
27
</template>

1
<script setup>
2
  import { ref } from "vue";
3

4
  const messageShow = ref(false);
5
  const messageText = ref("");
6

7
  function showMessage(text, onClose) {
8
    messageText.value = text;
9
    messageShow.value = true;
10
  }
11

12
  function closeMessage() {
13
    messageShow.value = false;
14
    onClose?.();
15
  }
16

17
  defineProps({
18
    text: String,
19
  });
20

21
  defineExpose({ showMessage, closeMessage });
22
</script>
23

24
<template>
25
  <div v-if="messageShow">{{ text }}</div>
26
</template>

1
import { onMounted, ref } from "vue";
2

3
export function useDefer(maxCount = 60) {
4
  const frameCount = ref(0);
5

6
  let rafId;
7

8
  function updateFrameCount() {
9
    rafId = requestAnimationFrame(() => {
10
      frameCount.value += 1;
11
      if (frameCount.value >= maxCount) return;
12
    });
13
    updateFrameCount();
14
  }
15

16
  updateFrameCount();
17

18
  onMounted(() => {
19
    cancelAnimationFrame(rafId);
20
  });
21

22
  return function defer(n) {
23
    return frameCount.value >= n;
24
  };
25
}

1
export default {
2
  props: {
3
    maxCount: {
4
      type: Number,
5
      default: 60,
6
    },
7
  },
8
  data() {
9
    return {
10
      frameCount: 0,
11
      rafId: null,
12
    };
13
  },
14
  created() {
15
    // 开始递归 RAF
16
    const tick = () => {
17
      this.rafId = requestAnimationFrame(() => {
18
        this.frameCount++;
19
        // 未达到上限才继续
20
        if (this.frameCount < this.maxCount) {
21
          tick();
22
        }
23
      });
24
    };
25
    tick();
26
  },
27
  beforeDestroy() {
28
    // 组件销毁前取消
29
    cancelAnimationFrame(this.rafId);
30
  },
31
  methods: {
32
    defer(n) {
33
      return this.frameCount >= n;
34
    },
35
  },
36
};

1
<script>
2
  import deferMixin from "@/mixins/defer";
3

4
  export default {
5
    name: "MyComponent",
6
    mixins: [deferMixin],
7
    // 如果需要修改默认 60 帧：
8
    props: {
9
      maxCount: {
10
        type: Number,
11
        default: 100,
12
      },
13
    },
14
  };
15
</script>
16
<template>
17
  <div v-for="n in 100">
18
    <span v-if="defer(n)">{{n}}</span>
19
  </div>
20
</template>

1
const person = { name: "兜兜", age: 18 };
2

3
// 使用 typeof 获取 person 对象的类型
4
type Person = typeof person;
5

6
/*
7
Person 类型等价于:
8
{
9
  name: string;
10
  age: number;
11
}
12
*/
13

14
function updatePerson(p: Person) {
15
  // p 的类型是 { name: string; age: number; }
16
}

1
const userInfo = {
2
  id: 1,
3
  name: "兜兜",
4
  roles: ["admin", "user"] as const,
5
  permissions: { read: true, write: false, delete: false },
6
  createdAt: new Date(),
7
};
8

9
// 使用 typeof 获取复杂对象的完整类型
10
type UserInfoType = typeof userInfo;
11

12
/* UserInfoType 等价于:
13
{
14
  id: number;
15
  name: string;
16
  roles: readonly ["admin", "user"];
17
  permissions: {
18
    read: boolean;
19
    write: boolean;
20
    delete: boolean;
21
  };
22
  createdAt: Date;
23
 }
24
 */

1
function calculateTotal(items: { price: number; quantity: number }[]) {
2
  return items.reduce((total, item) => total + item.price * item.quantity, 0);
3
}
4
// 获取函数的类型
5
type CalculateTotalType = typeof calculateTotal;
6

7
// 获取函数参数类型
8
type CalculateTotalParams = Parameters<typeof calculateTotal>;
9

10
// 获取函数返回值类型
11
type CalculateTotalReturnType = ReturnType<typeof calculateTotal>;
12

13
// 使用示例
14
const items = [
15
  { price: 10, quantity: 2 },
16
  { price: 5, quantity: 3 },
17
];
18
const total: CalculateTotalReturnType = calculateTotal(items); // number

1
class UserAccount {
2
  name: string;
3
  id: number;
4
  constructor(name: string, id: number) {
5
    this.name = name;
6
    this.id = id;
7
  }
8
  getInfo() {
9
    return `${this.name} (${this.id});`;
10
  }
11
}
12
const userInstance = new UserAccount("兜兜", 1);
13

14
// 获取实例类型
15
type UserInstanceType = typeof userInstance;
16

17
// 获取类的构造函数类型
18
type UserClassType = typeof UserAccount;
19

20
// 使用类构造函数类型创建工厂函数
21
function createUser(ctor: UserClassType, name: string, id: number): InstanceType<UserClassType> {
22
  return new ctor(name, id);
23
}
24
const newUser = createUser(UserAccount, "Murphy", 2);

1
enum Direction {
2
  Up = "UP",
3
  Down = "DOWN",
4
  Left = "LEFT",
5
  Right = "RIGHT",
6
}
7

8
// 获取枚举类型
9
type DirectionType = typeof Direction;
10

11
// 在运行时使用枚举
12
function move(direction: Direction) {
13
  switch (direction) {
14
    case Direction.Up:
15
      console.log("Moving up");
16
      break;
17
    case Direction.Down:
18
      console.log("Moving down");
19
      break;
20
  }
21
}
22
// 使用 typeof 获取枚举成员的类型
23
type DirectionValue = DirectionType[keyof DirectionType];