快捷導(dǎo)航

Vue中的計(jì)算屬性和axios基本使用回顧

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

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

1. 什么是計(jì)算屬性

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

計(jì)算屬性指的是通過一系列運(yùn)算之后，最終得到一個(gè)屬性值。

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

示例代碼如下：

2. 計(jì)算屬性的特點(diǎn)

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

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

計(jì)算屬性

特點(diǎn)：

1. 定義的時(shí)候，要被定義為“方法”

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

好處：

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

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

3. 如何聲明計(jì)算屬性

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

示例代碼如下：

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

4. 計(jì)算屬性的使用注意點(diǎn)

① 計(jì)算屬性必須定義在computed 節(jié)點(diǎn)中

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

③ 計(jì)算屬性必須有返回值

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

5. 計(jì)算屬性 vs 方法

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

因此計(jì)算屬性的性能更好：

6. axios

axios 是一個(gè)專注于網(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)用某個(gè)方法的返回值是 Promise 實(shí)例，則前面可以添加 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)
 
   })