vue全家桶進階之路46：Vue3 Axios攔截器

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

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

npm install axios vue@next

然後，在你的Vue.js 3應用程式中，你可以使用以下代碼來導入和使用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發出一個GET請求，從API端點/api/data獲取數據，並將響應數據賦值給Vue組件的data變數中，如果請求出錯，則將錯誤信息賦值給error變數。

註意，在Vue.js 3中，使用Axios時，需要將其包裝在Vue 3的Reactivity API中，例如，上面的代碼中，使用了Vue 3的ref函數將data和error變數轉換為響應式對象。

除此之外，在Vue.js 3中，你可以將Axios作為插件使用，併在Vue實例中進行全局配置。下麵是一個示例：

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實例的全局屬性$axios中，以便在應用程式的任何組件中使用。

總之，Vue.js 3中的Axios使用與Vue.js 2.x基本相同，但需要使用Vue 3的Reactivity API將數據轉換為響應式對象。此外，你可以將Axios作為Vue的插件使用，併在Vue實例中進行全局配置。

globalProperties 

globalProperties 是 Vue 3 中的一個全局配置對象，它允許你在應用程式的任何地方添加自定義的全局屬性和方法。

在 Vue.js 3 中，你可以使用 app.config.globalProperties 對象添加全局屬性和方法，這樣在 Vue 實例中就可以直接訪問它們，而不需要在每個組件中都進行導入。

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

const app = createApp(App)

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

app.mount('#app')

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

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() 調用這個全局方法：

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

需要註意的是，globalProperties 中添加的全局屬性和方法會在所有 Vue 組件中共用，並且會被所有組件實例繼承。因此，你需要確保添加的全局屬性和方法不會與組件實例中的屬性和方法衝突。

ctx 

在 Vue 3 中，ctx 是組件上下文對象，它包含了一個組件實例的所有屬性和方法。

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

下麵是 ctx 對象中的一些常用屬性和方法：

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

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

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

• slots: 包含了所有插槽內容的函數或者節點，可以使用 v-slot 或者 slot-scope 來定義插槽。

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

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

• root: 當前組件樹中的根組件實例。

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

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

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

Proxy 

Proxy 是 ES6 中新增的一種原生對象，用於在運行時動態地攔截和處理 JavaScript 對象的操作。它提供了一個可編程的代理，可以對目標對象進行操作前進行預處理和過濾，從而可以用來實現許多高級功能，例如數據綁定、數據校驗、屬性攔截等。

Proxy 對象的基本用法如下：

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"

在上面的例子中，我們創建了一個名為 target 的普通對象，然後用 Proxy 對象對其進行包裝。在 Proxy 對象的第二個參數中，我們定義了一個攔截器對象，包含了兩個方法 get 和 set。當我們對 proxy 對象進行屬性讀取時，會觸發 get 方法，輸出一個日誌和目標對象中對應屬性的值；當我們對 proxy 對象進行屬性設置時，會觸發 set 方法，輸出一個日誌，並將目標對象中對應屬性的值進行更新。

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

需要註意的是，Proxy 對象只能對對象進行操作，不能對原始值進行操作。此外，由於 Proxy 對象會對目標對象進行包裝，所以會導致一定的性能損耗，因此應該謹慎使用。

getCurrentInstance 

ctx 和 getCurrentInstance 都是 Vue 3 中的全局 API，用於在組件中獲取當前上下文和當前組件實例對象，但它們的作用不完全相同。

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

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

需要註意的是，ctx 和 getCurrentInstance 都是 Vue 3 中的 API，在 Vue 2 中並不存在。在 Vue 2 中，我們可以通過 this 來訪問組件實例對象和組件的數據和方法。