在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 來訪問組件實體物件和組件的資料和方法，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/550712.html
標籤：其他
上一篇：執行背景關系
下一篇：返回列表