## 1. Vue2的日子好好的，為啥出來(lái)個(gè)Vue3?

眾所周知，Vue2在生產(chǎn)力方面很不錯(cuò)，很多公司項(xiàng)目都是基于Vue2開(kāi)發(fā)的，用戶(hù)基數(shù)也大，那為啥還要推出Vue3,或者Vue2的一些痛點(diǎn)在哪里，各位看官，您往下看。

原因有很多，不同角度看法不一樣，我有兩個(gè)大家公認(rèn)的觀點(diǎn)，

- 第一個(gè)就是Vue2 沒(méi)有一種干凈和方便的方法，能讓我們?cè)诙鄠€(gè)組件之間提取和復(fù)用邏輯的機(jī)制，之前的復(fù)用大家第一反應(yīng)就是組件，但并不是純粹的邏輯復(fù)用。
- 第二個(gè)就是Vue2在支持TS上不友好，類(lèi)型推斷不夠友好。

## 2. 有人覺(jué)得Vue3不甜了，為啥啊？

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

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

針對(duì)以上兩個(gè)問(wèn)題，咱們來(lái)寬寬列位的心，

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

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

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

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

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

老話(huà)不是說(shuō)嘛， **不怕能耐差，就怕眼睛窮啊**，你沒(méi)見(jiàn)過(guò)好代碼，你怎么能寫(xiě)出好代碼了呢？

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

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

### 功能描述

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

### 功能演示

### 代碼實(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)出來(lái)的論文列表list，我們送到下一個(gè)hooks進(jìn)行 模糊查詢(xún)

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

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

  return {
    search,
    computedList
  }
}
```

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

```html
<template>
  <div>

    <select v-model="username">
      <option value="富貴老師">富貴老師</option>
      <option value="西門(mén)老師">西門(mén)老師</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>
```

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