> 剛剛學(xué)會(huì)Vue2的人, 已經(jīng)躲在一個(gè)角落里嚶嚶的哭了起來

1. 我剛學(xué)會(huì)Vue2, 又整個(gè)3， 好難啊， 不要再更新了， 也不要再卷我了。
2. Vue3的 VCA (Vue Composition Api) 寫法， 跟 react hooks 太像了， 咋又借鑒了？ 生產(chǎn)力就是復(fù)制copy?

針對以上兩個(gè)問題，咱們來寬寬列位的心，

1. 其實(shí)Vue3 還是向下兼容，并支持Vue Option Api 的寫法， 只不過多了一種新的函數(shù)式的寫法，不會(huì)增加太多的學(xué)習(xí)成本，現(xiàn)在問題就是酸口的，還是辣口的，您選哪一種啊？
2. VCA 在實(shí)現(xiàn)上也其實(shí)只是把 Vue 本身就有的響應(yīng)式系統(tǒng)更顯式地暴露出來而已。真要說像的話，VCA 跟 MobX 還更像一點(diǎn)，說跟react像的，那就是不懂啊。 這話不是我說的， 是尤大大說的。

## 3. Vue3的setup 你會(huì)用？

打開你的vscode, 隨便粘貼復(fù)制出一段代碼，你會(huì)看見是這種吧，

而， 官方的期待是這種代碼

所以不是不好用，是我們有時(shí)候壓根就用錯(cuò)了，

老話不是說嘛， **不怕能耐差，就怕眼睛窮啊**，你沒見過好代碼，你怎么能寫出好代碼了呢？

所以列位可以參考官網(wǎng)文檔，看看作者舉得一個(gè)例子， 是怎么把hooks的邏輯抽離出來的。

當(dāng)然你要覺得去找麻煩， 那你也可以看看我為大家準(zhǔn)備的一小段代碼，

### 功能描述

功能非常簡單， 一個(gè)下拉列表，有三個(gè)老師 (富貴老師 , 西門老師, 嚶嚶老師) ,切換不同老師，就可以把他們?nèi)齻€(gè)發(fā)表過的論文給聯(lián)動(dòng)檢索出來，而且還支持模糊搜索功能， 那么這個(gè)需求你打算怎么寫呢？

### 功能演示

### 代碼實(shí)現(xiàn)

第一次和每次切換后都要獲取新數(shù)據(jù)，所以我們可以單獨(dú)封裝一個(gè)hooks函數(shù)

```js
function useList () {
  // 獲取異步數(shù)據(jù)
  const username = ref('富貴老師')
  const list = ref([])
  onMounted(() => {
    getList()
  })

  const getList = async () => {
    const result = await axios.get(`http://localhost:8000/news?author=${username.value}`)

    console.log(result.data)
    list.value = result.data
  }

  watch(username, getList)

  return {
    username,
    list
  }
}
```

基于上個(gè)函數(shù)生產(chǎn)出來的論文列表list，我們送到下一個(gè)hooks進(jìn)行 模糊查詢

```js
function useQuery (list) {
  // 做模糊查詢
  const search = ref('')

  const computedList = computed(() => {
    return list.value.filter(item => item.content.includes(search.value))
  })

  return {
    search,
    computedList
  }
}
```

最后把生產(chǎn)出來的computedList ,顯示在頁面上就行，

```html
<template>
  <div>

    <select v-model="username">
      <option value="富貴老師">富貴老師</option>
      <option value="西門老師">西門老師</option>
      <option value="嚶嚶老師">嚶嚶老師</option>
    </select>

    <input type="text" v-model="search">
    <ul v-for="data in computedList" :key="data.id">
      <div v-html="data.content"></div>
    </ul>
  </div>
</template>
<script setup>
    const {username,list} = useList()
    const { search, computedList } = useQuery(list)
</script>
```

這樣寫完后， 邏輯單獨(dú)封裝， 組件只是聚合函數(shù)的地方， 才不至于寫出意大利面條代碼。更多關(guān)于“web前端培訓(xùn)”的問題，歡迎咨詢千鋒教育在線名師。千鋒已有十余年的培訓(xùn)經(jīng)驗(yàn)，課程大綱更科學(xué)更專業(yè)，有針對零基礎(chǔ)的就業(yè)班，有針對想提升技術(shù)的提升班，高品質(zhì)課程助理你實(shí)現(xiàn)夢想。