export default {
  data() {
    return {
      // 組件的數(shù)據(jù)
    };
  },
  mounted() {
    // 組件掛載完成后的副作用操作
    console.log('組件已掛載到DOM');
    // 可以執(zhí)行DOM操作或數(shù)據(jù)請(qǐng)求等
  },
  methods: {
    // 組件的方法
  }
};

import { onMounted, ref } from 'vue';
export default {
  setup() {
    const count = ref(0);
    onMounted(() => {
      // 在這里可以執(zhí)行DOM操作或數(shù)據(jù)請(qǐng)求
      console.log('組件已掛載');
    });
    // 也可以返回一個(gè)函數(shù)進(jìn)行清理
    return {
      count
    };
  }
};

import { onMounted, ref } from 'vue';
import axios from 'axios';
export default {
  setup() {
    const data = ref(null);
    onMounted(async () => {
      try {
        const response = await axios.get('https://api.example.com/data');
        data.value = response.data;
        const response2 = await axios.get('https://api.example.com/data2');
        data.value2 = response2.data;
        const response3 = await axios.get('https://api.example.com/data3');
        data.value3 = response3.data;
        const response4 = await axios.get('https://api.example.com/data4');
        data.value4 = response4.data;
        // ...更多的異步操作
      } catch (error) {
        console.error('請(qǐng)求錯(cuò)誤:', error);
      }
    });
    return {
      data
    };
  }
};

import { ref, onMounted } from 'vue';
import axios from 'axios';
export default {
  setup() {
    // 聲明響應(yīng)式數(shù)據(jù)引用
    const data = ref(null);
    const data2 = ref(null);
    const data3 = ref(null);
    const data4 = ref(null);
    onMounted(async () => {
      // 使用Promise.all來(lái)處理并發(fā)的axios請(qǐng)求
      await Promise.all([
        axios.get('https://api.example.com/data'),
        axios.get('https://api.example.com/data2'),
        axios.get('https://api.example.com/data3'),
        axios.get('https://api.example.com/data4')
      ]).then(responses => {
        // 所有請(qǐng)求成功完成后，更新響應(yīng)式數(shù)據(jù)
        data.value = responses[0].data;
        data2.value = responses[1].data;
        data3.value = responses[2].data;
        data4.value = responses[3].data;
        // 這里可以放置所有異步任務(wù)完成后的代碼...
      }).catch(error => {
        // 處理請(qǐng)求中出現(xiàn)的任何錯(cuò)誤
        console.error('請(qǐng)求錯(cuò)誤:', error);
      });
    });
    // 返回響應(yīng)式狀態(tài)供模板或其他Composition API使用
    return {
      data,
      data2,
      data3,
      data4
    };
  }
};

import { onMounted } from 'vue';
export default {
  setup() {
    onMounted(() => {
      // 執(zhí)行一次性副作用
      console.log('這是一個(gè)一次性副作用');
    });
    return {};
  }
};

import { onMounted, ref } from 'vue';
export default {
  setup() {
    const count = ref(0);
    const intervalId = setInterval(() => {
      count.value++;
    }, 1000);
    // 注冊(cè)清理工作
    const cleanup = onMounted(() => {
      return () => {
        clearInterval(intervalId);
        console.log('定時(shí)器已清理');
      };
    });
    return {
      count,
      cleanup
    };
  }
};

import { onMounted, ref, watch } from 'vue';
export default {
  setup() {
    const data = ref(null);
    onMounted(() => {
      // 可以組合使用其他Composition API
      watch(data, (newValue, oldValue) => {
        console.log(`數(shù)據(jù)從 ${oldValue} 變更為 ${newValue}`);
      });
    });
    // 模擬數(shù)據(jù)變化
    setTimeout(() => {
      data.value = { name: '新數(shù)據(jù)' };
    }, 2000);
    return {
      data
    };
  }
};

function task1() {
  // 初始化任務(wù)1
}
function task2() {
  // 初始化任務(wù)2
}
onMounted(task1);
onMounted(task2);