在Vue.js 3中，使用Axios與Vue.js 2.x中類似，但是需要進(jìn)行一些修改和更新，下面是Vue.js 3中Axios的定義和使用方式：

首先，你需要安裝Axios和Vue.js 3.x，可以使用npm或yarn等包管理工具安裝：

npm install axios vue@next

然后，在你的Vue.js 3應(yīng)用程序中，你可以使用以下代碼來導(dǎo)入和使用Axios：

import { ref } from 'vue'
import axios from 'axios'

export default {
  setup() {
    const data = ref(null)
    const error = ref(null)

    axios.get('/api/data')
      .then(response => {
        data.value = response.data
      })
      .catch(error => {
        error.value = error
      })

    return { data, error }
  }
}

上面的代碼使用Axios發(fā)出一個(gè)GET請(qǐng)求，從API端點(diǎn)/api/data獲取數(shù)據(jù)，并將響應(yīng)數(shù)據(jù)賦值給Vue組件的data變量中，如果請(qǐng)求出錯(cuò)，則將錯(cuò)誤信息賦值給error變量。

注意，在Vue.js 3中，使用Axios時(shí)，需要將其包裝在Vue 3的Reactivity API中，例如，上面的代碼中，使用了Vue 3的ref函數(shù)將data和error變量轉(zhuǎn)換為響應(yīng)式對(duì)象。

除此之外，在Vue.js 3中，你可以將Axios作為插件使用，并在Vue實(shí)例中進(jìn)行全局配置。下面是一個(gè)示例：

import { createApp } from 'vue'
import axios from 'axios'
import App from './App.vue'

const app = createApp(App)

app.config.globalProperties.$axios = axios
// 在這里添加更多的全局配置

app.mount('#app')

上面的代碼將Axios作為Vue的插件，并將其添加到Vue實(shí)例的全局屬性$axios中，以便在應(yīng)用程序的任何組件中使用。

總之，Vue.js 3中的Axios使用與Vue.js 2.x基本相同，但需要使用Vue 3的Reactivity API將數(shù)據(jù)轉(zhuǎn)換為響應(yīng)式對(duì)象。此外，你可以將Axios作為Vue的插件使用，并在Vue實(shí)例中進(jìn)行全局配置。

globalProperties?

globalProperties 是 Vue 3 中的一個(gè)全局配置對(duì)象，它允許你在應(yīng)用程序的任何地方添加自定義的全局屬性和方法。

在 Vue.js 3 中，你可以使用 app.config.globalProperties 對(duì)象添加全局屬性和方法，這樣在 Vue 實(shí)例中就可以直接訪問它們，而不需要在每個(gè)組件中都進(jìn)行導(dǎo)入。

例如，你可以通過以下方式在 globalProperties 中添加一個(gè)全局屬性 $myGlobalData：

const app = createApp(App)

app.config.globalProperties.$myGlobalData = { name: 'John', age: 30 }

app.mount('#app')

這樣，在 Vue 組件中就可以通過 $myGlobalData 訪問這個(gè)全局屬性：

export default {
  setup() {
    const data = ref($myGlobalData)
    return { data }
  }
}

同樣，你也可以在 globalProperties 中添加全局方法：

const app = createApp(App)

app.config.globalProperties.$myGlobalMethod = function() {
  console.log('This is a global method!')
}

app.mount('#app')

然后，在 Vue 組件中就可以通過 $myGlobalMethod() 調(diào)用這個(gè)全局方法：

export default {
  setup() {
    $myGlobalMethod() // 輸出：This is a global method!
  }
}

需要注意的是，globalProperties 中添加的全局屬性和方法會(huì)在所有 Vue 組件中共享，并且會(huì)被所有組件實(shí)例繼承。因此，你需要確保添加的全局屬性和方法不會(huì)與組件實(shí)例中的屬性和方法沖突。

ctx?

在 Vue 3 中，ctx 是組件上下文對(duì)象，它包含了一個(gè)組件實(shí)例的所有屬性和方法。

在 Vue 3 的組件中，你可以使用 setup() 函數(shù)來編寫組件的邏輯代碼。setup() 函數(shù)會(huì)接收一個(gè) ctx 參數(shù)，它是一個(gè)組件上下文對(duì)象，包含了許多屬性和方法，可以幫助你訪問和操作組件實(shí)例。

下面是 ctx 對(duì)象中的一些常用屬性和方法：

• attrs: 包含了所有傳遞給組件的非響應(yīng)式屬性，例如 id、class、style 等。

• emit: 用于觸發(fā)自定義事件，可以傳遞任意數(shù)量的參數(shù)。例如，ctx.emit('my-event', arg1, arg2) 將觸發(fā)名為 my-event 的自定義事件，并傳遞 arg1 和 arg2 兩個(gè)參數(shù)。

• expose: 用于暴露組件的屬性和方法，使它們可以被父組件訪問。例如，ctx.expose({ myProp, myMethod }) 將 myProp 屬性和 myMethod 方法暴露給父組件。

• slots: 包含了所有插槽內(nèi)容的函數(shù)或者節(jié)點(diǎn)，可以使用 v-slot 或者 slot-scope 來定義插槽。

• attrs: 包含了所有傳遞給組件的非響應(yīng)式屬性，例如 id、class、style 等。

• listeners: 包含了所有綁定在組件上的事件監(jiān)聽器，可以通過 v-on 或者 @ 綁定事件。例如，<my-component @click="handleClick" /> 將在 ctx.listeners 中包含一個(gè)名為 click 的屬性，它的值是 handleClick 方法。

• root: 當(dāng)前組件樹中的根組件實(shí)例。

• refs: 包含了所有在組件上使用 ref 注冊(cè)的 DOM 元素或組件實(shí)例，可以使用 ctx.refs.refName 訪問。

• attrs: 包含了所有傳遞給組件的非響應(yīng)式屬性，例如 id、class、style 等。

需要注意的是，ctx 對(duì)象中的屬性和方法都是只讀的，你不能修改它們的值。如果你需要修改組件實(shí)例的屬性或者方法，你可以在 setup() 函數(shù)中使用 ref、reactive、computed 等響應(yīng)式 API 來創(chuàng)建可響應(yīng)的變量和方法。

Proxy?

Proxy 是 ES6 中新增的一種原生對(duì)象，用于在運(yùn)行時(shí)動(dòng)態(tài)地?cái)r截和處理 JavaScript 對(duì)象的操作。它提供了一個(gè)可編程的代理，可以對(duì)目標(biāo)對(duì)象進(jìn)行操作前進(jìn)行預(yù)處理和過濾，從而可以用來實(shí)現(xiàn)許多高級(jí)功能，例如數(shù)據(jù)綁定、數(shù)據(jù)校驗(yàn)、屬性攔截等。

Proxy 對(duì)象的基本用法如下：

let target = { name: 'John', age: 30 };
let proxy = new Proxy(target, {
  get: function(target, prop, receiver) {
    console.log(`Getting ${prop} from target`);
    return target[prop];
  },
  set: function(target, prop, value, receiver) {
    console.log(`Setting ${prop} to ${value} on target`);
    target[prop] = value;
    return true;
  }
});

proxy.name; // Output: "Getting name from target", "John"
proxy.age; // Output: "Getting age from target", 30
proxy.location = "New York"; // Output: "Setting location to New York on target"

在上面的例子中，我們創(chuàng)建了一個(gè)名為 target 的普通對(duì)象，然后用 Proxy 對(duì)象對(duì)其進(jìn)行包裝。在 Proxy 對(duì)象的第二個(gè)參數(shù)中，我們定義了一個(gè)攔截器對(duì)象，包含了兩個(gè)方法 get 和 set。當(dāng)我們對(duì) proxy 對(duì)象進(jìn)行屬性讀取時(shí)，會(huì)觸發(fā) get 方法，輸出一個(gè)日志和目標(biāo)對(duì)象中對(duì)應(yīng)屬性的值；當(dāng)我們對(duì) proxy 對(duì)象進(jìn)行屬性設(shè)置時(shí)，會(huì)觸發(fā) set 方法，輸出一個(gè)日志，并將目標(biāo)對(duì)象中對(duì)應(yīng)屬性的值進(jìn)行更新。

除了上面的 get 和 set 方法之外，Proxy 還提供了許多其他的攔截方法，包括 apply、construct、defineProperty、deleteProperty、getOwnPropertyDescriptor、getPrototypeOf、has、isExtensible、ownKeys、preventExtensions、setPrototypeOf 等。你可以在這些攔截方法中進(jìn)行各種預(yù)處理和過濾操作，從而實(shí)現(xiàn)各種高級(jí)功能。

需要注意的是，Proxy 對(duì)象只能對(duì)對(duì)象進(jìn)行操作，不能對(duì)原始值進(jìn)行操作。此外，由于 Proxy 對(duì)象會(huì)對(duì)目標(biāo)對(duì)象進(jìn)行包裝，所以會(huì)導(dǎo)致一定的性能損耗，因此應(yīng)該謹(jǐn)慎使用。

?

getCurrentInstance?

ctx 和 getCurrentInstance 都是 Vue 3 中的全局 API，用于在組件中獲取當(dāng)前上下文和當(dāng)前組件實(shí)例對(duì)象，但它們的作用不完全相同。

ctx 是一個(gè)包含了組件實(shí)例對(duì)象以及一些額外屬性和方法的上下文對(duì)象，它可以在組件的模板和組合式 API 中使用。ctx 包含了許多屬性和方法，例如 attrs、emit、slots、root 等，這些屬性和方法可以讓我們更方便地訪問組件的數(shù)據(jù)和方法。例如，我們可以通過 ctx.attrs 來訪問組件的屬性，通過 ctx.emit 來觸發(fā)組件的自定義事件。

getCurrentInstance 則是一個(gè)用于獲取當(dāng)前組件實(shí)例對(duì)象的全局 API，它可以在組件的模板和組合式 API 中使用。與 ctx 不同的是，getCurrentInstance 返回的是當(dāng)前組件實(shí)例對(duì)象本身，而不是一個(gè)包含了組件實(shí)例對(duì)象的上下文對(duì)象。這意味著，通過 getCurrentInstance 我們可以訪問到組件實(shí)例對(duì)象的所有屬性和方法，而不僅僅是 ctx 中包含的屬性和方法。例如，我們可以通過 getCurrentInstance().$refs 來訪問組件的引用。

需要注意的是，ctx 和 getCurrentInstance 都是 Vue 3 中的 API，在 Vue 2 中并不存在。在 Vue 2 中，我們可以通過 this 來訪問組件實(shí)例對(duì)象和組件的數(shù)據(jù)和方法。文章來源地址http://www.zghlxwxcb.cn/news/detail-419704.html

到了這里，關(guān)于vue全家桶進(jìn)階之路46：Vue3 Axios攔截器的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！