vue3中加载子表数据用什么钩子函数

在Vue3中，加载子表数据可以使用created钩子函数。created钩子函数是在组件实例创建完成之后被调用的，可以在这个钩子函数中进行一些初始化的操作，包括加载子表数据。

在使用created钩子函数加载子表数据的过程中，可以通过调用API接口或者发送异步请求来获取子表数据。在获取到数据之后，可以将数据保存到组件的data属性中，或者通过props将数据传递给子组件。

下面是一个使用created钩子函数加载子表数据的示例代码：

<template>
  <div>
    <!-- 子表数据展示 -->
    <ul>
      <li v-for="item in childData" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      childData: []
    }
  },
  created() {
    // 在created钩子函数中加载子表数据
    this.getChildData();
  },
  methods: {
    getChildData() {
      // 发送异步请求获取子表数据
      // 假设接口返回的数据为一个数组
      // 这里使用setTimeout模拟异步请求
      setTimeout(() => {
        const data = [
          { id: 1, name: '子表数据1' },
          { id: 2, name: '子表数据2' },
          { id: 3, name: '子表数据3' }
        ];
        // 将数据保存到组件的data属性中
        this.childData = data;
      }, 1000);
    }
  }
};
</script>

在上面的示例代码中，使用了created钩子函数来调用getChildData方法，在该方法中发送异步请求获取子表数据，并将数据保存到组件的data属性中，然后在模板中使用v-for指令循环渲染子表数据。这样就实现了在Vue3中加载子表数据的功能。

需要注意的是，created钩子函数在组件实例创建完成后只会被调用一次，因此在使用该钩子函数加载子表数据时需要确保数据只加载一次，避免重复发送异步请求。如果需要在组件每次重新渲染时都加载子表数据，可以考虑使用其他钩子函数，如mounted钩子函数。

在Vue 3中，可以使用onMounted钩子函数来加载子表数据。但是Vue 3还引入了新的Composition API，其中包含了更多的钩子函数和功能，可以更灵活地处理组件内部的逻辑。以下是在Vue 3中加载子表数据的一些常用的钩子函数：

1. onMounted：在组件挂载后执行的钩子函数。可以在这里调用接口或者异步方法获取子表数据，并将其保存在组件的data或ref中。

示例代码：

import { onMounted, ref } from 'vue';

export default {
  setup() {
    const tableData = ref([]);

    onMounted(async () => {
      const res = await getData(); // 调用异步方法获取数据
      tableData.value = res.data; // 将数据保存在ref中
    });

    return {
      tableData
    };
  }
};

2. watch：观察组件内部数据变化并执行相应的操作。可以使用watch来观察父组件传递给子组件的props数据变化，一旦变化就去加载相应的子表数据。

示例代码：

import { watch, ref } from 'vue';

export default {
  props: ['parentId'],

  setup(props) {
    const tableData = ref([]);

    watch(() => props.parentId, async (newParentId) => {
      const res = await getData(newParentId); // 根据父组件传递的parentId加载子表数据
      tableData.value = res.data;
    });

    return {
      tableData
    };
  }
};

3. onUpdated：在组件更新后执行的钩子函数。可以在这里判断组件的某个props或者data的值是否发生变化，如果变化了就去加载子表数据。

示例代码：

import { ref, onUpdated } from 'vue';

export default {
  props: ['parentId'],

  setup(props) {
    const tableData = ref([]);

    let prevParentId = props.parentId;

    onUpdated(() => {
      if (prevParentId !== props.parentId) {
        // parentId发生了变化，重新加载子表数据
        // 可以调用接口或异步方法获取数据
        tableData.value = [];
      }
      prevParentId = props.parentId;
    });

    return {
      tableData
    };
  }
};

4. onBeforeUnmount：在组件卸载之前执行的钩子函数。可以在这里取消未完成的异步请求或是清空子表数据等操作。

示例代码：

import { ref, onBeforeUnmount } from 'vue';

export default {
  setup() {
    const tableData = ref([]);

    onBeforeUnmount(() => {
      // 组件卸载前的清理工作
      tableData.value = [];
    });

    return {
      tableData
    };
  }
};

5. onActivated和onDeactivated：在组件被keep-alive缓存和激活时执行的钩子函数。可以在onActivated中加载子表数据，在onDeactivated中清空子表数据。

示例代码：

import { ref, onActivated, onDeactivated } from 'vue';

export default {
  setup() {
    const tableData = ref([]);

    onActivated(async () => {
      const res = await loadData(); // 加载子表数据
      tableData.value = res.data;
    });

    onDeactivated(() => {
      // 清空子表数据
      tableData.value = [];
    });

    return {
      tableData
    };
  }
};

以上是在Vue 3中加载子表数据常用的钩子函数。根据实际需求选择合适的钩子函数来实现子表数据的加载与更新。

在Vue3中，加载子表数据可以使用以下钩子函数来实现：

1. beforeMount：在组件挂载之前被调用。在该钩子函数中，我们可以执行子表数据的加载操作。例如，通过发送异步请求获取数据。

2. mounted：在组件挂载完成后被调用。在该钩子函数中，我们可以对子表数据执行一些初始化操作，例如对数据进行处理、过滤或排序，并将数据渲染到页面上。

3. watch：可以使用Vue3中的watch API来监听数据的变化，并在数据发生变化时触发相应的回调函数。在watch回调函数中，我们可以执行子表数据的加载操作。

以下是使用这些钩子函数加载子表数据的示例代码：

<template>
  <div>
    <h1>加载子表数据示例</h1>
    <div v-for="item in subTableData" :key="item.id">
      {{ item.name }}
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, watch } from 'vue';
import { getSubTableData } from 'api';

const subTableData = ref([]);

onMounted(async () => {
  await loadSubTableData();
});

watch(someData, async () => {
  await loadSubTableData();
});

async function loadSubTableData() {
  subTableData.value = await getSubTableData();
}
</script>

在上述代码中，我们使用了ref函数来定义了一个响应式变量subTableData来存储子表数据。在onMounted钩子函数中，我们使用await关键字来等待子表数据加载完成，然后将数据赋值给subTableData。在watch钩子函数中，我们监听了一个名为someData的数据，当someData发生变化时，会触发回调函数，并执行子表数据的加载操作。

需要注意的是，这只是使用了一种常见的方式来加载子表数据，实际使用中可能会根据具体的业务需求进行适当的变化和调整。