Vue中的計算屬性和axios基本使用回顧

更新時間：2023年01月20日 10:07:02 作者：努力學(xué)習(xí)前端的小陳

這篇文章主要介紹了Vue中的計算屬性和axios基本使用回顧，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

1. 什么是計算屬性

計算屬性本質(zhì)上就是一個function 函數(shù)，它可以實時監(jiān)聽data 中數(shù)據(jù)的變化，并 return 一個計算后的新值，供組件渲染 DOM 時使用。

計算屬性指的是通過一系列運算之后，最終得到一個屬性值。

這個動態(tài)計算出來的屬性值可以被模板結(jié)構(gòu)或methods 方法使用。

示例代碼如下：

2. 計算屬性的特點

① 雖然計算屬性在聲明的時候被定義為方法，但是計算屬性的本質(zhì)是一個屬性

② 計算屬性會緩存計算的結(jié)果，只有計算屬性依賴的數(shù)據(jù)變化時，才會重新進(jìn)行運算

計算屬性

特點：

1. 定義的時候，要被定義為“方法”

2. 在使用計算屬性的時候，當(dāng)普通的屬性使用即可

好處：

1. 實現(xiàn)了代碼的復(fù)用

2. 只要計算屬性中依賴的數(shù)據(jù)源變化了，則計算屬性會自動重新求值！

3. 如何聲明計算屬性

計算屬性需要以function 函數(shù)的形式聲明到組件的computed 選項中

示例代碼如下：

注意：計算屬性側(cè)重于得到一個計算的結(jié)果，因此計算屬性中必須有return 返回值！

4. 計算屬性的使用注意點

① 計算屬性必須定義在computed 節(jié)點中

② 計算屬性必須是一個function 函數(shù)

③ 計算屬性必須有返回值

④ 計算屬性必須當(dāng)做普通屬性使用

5. 計算屬性 vs 方法

相對于方法來說，計算屬性會緩存計算的結(jié)果，只有計算屬性的依賴項發(fā)生變化時，才會重新進(jìn)行運算。

因此計算屬性的性能更好：

6. axios

axios 是一個專注于網(wǎng)絡(luò)請求的庫！

axios的基本使用

1. 發(fā)起 GET 請求：

    axios({
 
     // 請求方式 
     method: 'GET',
 
     // 請求的地址 
     url: 'http://www.liulongbin.top:3006/api/getbooks',
 
     // URL 中的查詢參數(shù)
 
     params: { 
       id: 1 
     }
 
   }).then(function (result) { 
     console.log(result) 
   })

2. 發(fā)起 POST 請求：

   document.querySelector('#btnPost').addEventListener('click', async function () {
 
     // 如果調(diào)用某個方法的返回值是 Promise 實例，則前面可以添加 await！
 
     // await 只能用在被 async “修飾”的方法中
 
     const { data: res } = await axios({
       method: 'POST',
       url: 'http://www.liulongbin.top:3006/api/post',
 
       data: {
         name: 'zs',
         age: 20
       }
 
     })
 
     console.log(res)
 
   })