## 1. Vue2的日子好好的，為啥出來個Vue3?

眾所周知，Vue2在生產力方面很不錯，很多公司項目都是基于Vue2開發的，用戶基數也大，那為啥還要推出Vue3,或者Vue2的一些痛點在哪里，各位看官，您往下看。

原因有很多，不同角度看法不一樣，我有兩個大家公認的觀點，

- 第一個就是Vue2 沒有一種干凈和方便的方法，能讓我們在多個組件之間提取和復用邏輯的機制，之前的復用大家第一反應就是組件，但并不是純粹的邏輯復用。
- 第二個就是Vue2在支持TS上不友好，類型推斷不夠友好。

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

> 剛剛學會Vue2的人, 已經躲在一個角落里嚶嚶的哭了起來

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

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

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

## 3. Vue3的setup 你會用？

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

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

所以不是不好用，是我們有時候壓根就用錯了，

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

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

當然你要覺得去找麻煩， 那你也可以看看我為大家準備的一小段代碼，

### 功能描述

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

### 功能演示

### 代碼實現

第一次和每次切換后都要獲取新數據，所以我們可以單獨封裝一個hooks函數

```js
function useList () {
  // 獲取異步數據
  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
  }
}
```

基于上個函數生產出來的論文列表list，我們送到下一個hooks進行 模糊查詢

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

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

  return {
    search,
    computedList
  }
}
```

最后把生產出來的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>
```

這樣寫完后， 邏輯單獨封裝， 組件只是聚合函數的地方， 才不至于寫出意大利面條代碼。更多關于“web前端培訓”的問題，歡迎咨詢千鋒教育在線名師。千鋒已有十余年的培訓經驗，課程大綱更科學更專業，有針對零基礎的就業班，有針對想提升技術的提升班，高品質課程助理你實現夢想。