iT邦幫忙

0

Vue3, Axios 需要寫在onMounted裡嗎?

大家好,
我想請問一個小小的疑惑
我的環境是Vue3,Vite

在開啟網頁時,如果我想接收伺服器回傳的資料,
並丟到顯示畫面時,
Axios是寫在setup裡面就好,還是寫在onMounted會比較好?
(因為兩個都可以執行,所以不曉得哪個寫法會比較好)

(1)直接寫在setup裡

<script setup>
    import { ref } from '@vue/runtime-core'
    import axios from 'axios'
    //伺服器 與 params
    const url = "192.168.xxx.xxx"
    const urlParams="warning"
    //接收伺服器的回傳資料
    const resData = ref()

    const getAxios = function(){
        axios.get(`http://${url}/userstatus`,
            { params : {status: urlParams } }
        ).then((res)=>{
            //獲取伺服器的回傳資料
            resData.value = res.data
        })
        .catch((error)=>{
            console.log(error,'失敗');
        })
    }
    //執行Axios
    getAxios()
</script>

<template>
    <h2>我是Axios</h2>
    <div>{{resData}}</div>
</template>

(2)寫在onMounted

<script setup>
    import { onMounted,ref } from '@vue/runtime-core'
    import axios from 'axios'
    //伺服器 與 params
    const url = "192.168.xxx.xxx"
    const urlParams="warning"
    
    //接收伺服器的回傳資料
    const resData = ref()
    
    onMounted(()=>{
        axios.get(`http://${url}/userstatus`,
            { params : {status: urlParams } }
        ).then((res)=>{
            //獲取伺服器的回傳資料
            resData.value = res.data
        })
        .catch((error)=>{
            console.log(error,'失敗');
        })
    })
</script>

<template>
    <h2>我是Axios</h2>
    <div>{{resData}}</div>
</template>

2 個回答

1
froce
iT邦大師 1 級 ‧ 2021-11-30 13:44:04
最佳解答

這個你要去看生命週期:
https://cn.vuejs.org/v2/guide/instance.html#%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E5%9B%BE%E7%A4%BA

有時候你會想要加載資料後做一些操作如組件的DOM操作,那就只有 onMounted 能操作。
setup比onMounted早。

0
mengke
iT邦新手 5 級 ‧ 2021-12-15 10:09:45

我更习惯于直接在setup中写,也就是beforeCreate或created阶段,当然onMounted也是可以的,setup在生命周期中运行比onMounted更早,但是节约的时间很有限。v3的文档应该是这个https://v3.cn.vuejs.org/guide/composition-api-lifecycle-hooks.html

我要發表回答

立即登入回答