本文主要介绍Vue3中如何使用组件，如何向组件传值及更新。

1. 抽出独立组件

将复杂的界面逻辑拆分为独立的可复用组件是 Vue 组件化开发的核心之一。

独立组件的抽取遵循以下原则：

• 分离关注点：根据功能模块拆分组件，使每个组件专注于一项任务。
• 父子通信：使用 props 传递数据，使父组件可以将数据传递给子组件。
• 减少耦合：将数据展示和业务逻辑分离到不同组件中，有助于复用和维护。

示例：创建一个 InfoPanel 组件，用于展示数据统计信息。

父组件代码

<template>
  <!-- 将 InfoPanel 组件从父组件中独立出来 -->
  <InfoPanel :panelData="panelData" />
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import InfoPanel from './InfoPanel.vue';

const panelData = ref({
  imgCount: 50,
  currentIndex: 10,
  total: 100,
  anomalyImgCount: 5,
  totalStats: { success: 30, fail: 20 },
  recText: '数据正在处理中...'
});
</script>

子组件 InfoPanel代码

<template>
  <div class="stat-panel">
    <t-statistic title="图片总数" :value="panelData.imgCount" unit="张" />
    <t-statistic title="已处理" color="green" :value="panelData.currentIndex" unit="张" />
    <t-statistic title="异常图片" :value="panelData.anomalyImgCount" unit="张" />
    <p>{{ panelData.recText }}</p>
  </div>
</template>

<script lang="ts" setup>
import { defineProps } from 'vue';

const props = defineProps<{
  panelData: {
    imgCount: number;
    currentIndex: number;
    anomalyImgCount: number;
    recText: string;
  };
}>();
</script>

2. 组件内容的更新

在实际开发中，父组件通常需要更新传递给子组件的数据。确保子组件可以实时响应这些更新有以下要点：

• 响应式数据：使用 ref 和 reactive 创建响应式数据，以确保数据变化会触发 UI 更新。
• 避免直接修改 props：在子组件中可以使用 watch 和本地数据拷贝（例如 currentTask）来监听并响应父组件的数据更新，而不直接改变 props。

防止直接修改 props数据

在子组件中，避免直接修改 props。可以在子组件中定义一个局部响应式对象（如 currentTask），并在 watch 中同步数据：

const currentTask = ref({ ...props.item });

watch(
  () => props.item,
  (newItem) => {
    currentTask.value = { ...newItem };
  },
  { immediate: true, deep: true }
);

3. watch的合理使用

合理使用 watch 是组件中实现数据响应的重要方式。

以下是几点最佳实践：

• 属性监听：当需要对多个属性的变化进行不同的处理时，可以为每个属性设置单独的 watch 监听。
• 深度监听：对于复杂对象（如嵌套数据），可以使用深度监听来监听所有属性的变化。但深度监听会在任意子属性变化时触发，因此要谨慎使用。
• 即时监听：使用 { immediate: true } 在初始化时即执行回调，确保组件加载时的值被及时捕获。

单个属性监听

示例：监听 detection_type 属性的变化，并初始化相关数据。

watch(
  () => currentTask.value.detection_type,
  (newDetType) => {
    if (newDetType) {
      initStatPanel(); // 根据新的 detection_type 初始化数据
    }
  },
  { immediate: true }
);

多个属性独立监听

示例：分别监听 file_url 和 detection_type 的变化，以便执行不同的逻辑处理。

watch(
  () => currentTask.value.file_url,
  (newFileUrl) => {
    if (newFileUrl) {
      loadFile(newFileUrl); // 加载新的文件内容
    }
  },
  { immediate: true }
);

watch(
  () => currentTask.value.detection_type,
  (newDetType) => {
    if (newDetType) {
      initStatPanel();
    }
  },
  { immediate: true }
);

深度监听

当需要监听复杂对象（如 panelData）的所有属性时，可以使用深度监听：

watch(
  () => panelData.value,
  (newData) => {
    // 在 panelData 的任意属性变化时执行操作
    console.log('Panel data updated:', newData);
  },
  { deep: true }
);

博客总结

在 Vue 3 + TypeScript 中，通过抽取组件、合理使用 watch 监听和父子组件的响应式数据传递，可以使组件更具复用性和独立性。这种实践不仅提升了代码的模块化和维护性，还可以让代码结构更加清晰。