本Vue 3教程將介紹如何構建一個簡單的搜索模塊，該模塊使用文本輸入過濾數組中的文章。

也就是說，在創建這個Vue 3項目的過程中，我們需要使用Composition API構建兩個組件。

我們的目標是這樣的：

是不是很有意思呢？事不宜遲，讓我們開始編碼吧。

開始

我們可以有很多種方法將Vue 3添加到現有項目中，甚至可以自己創建一個Vue 3項目。

本教程將介紹我個人最喜歡的兩個途徑：

• Vue CLI
• Vite

Vue CLI

如果你以前做過Vue開發，那么一定知道如何使用Vue CLI來設置項目。

Vue CLI是Vue開發的命令行界面，是Vue生態系統的基準。在本教程的示例中，我們將通過Vue CLI來創建一個Vue app。

首先，確保擁有最新版本的Vue CLI。我們可以通過運行npm update -g @vue/cli終端來做到這一點。

接下來，為了創建項目，我們要運行vue create <PROJECT-NAME>。

如果成功更新了CLI，那就可以選擇Vue3。

一旦我們選擇了Vue 3選項，就會構建app了。完成構建后，我們只需要進入項目，然后運行Vue app！其命令是：

cd <PROJECT-NAME>
npm run serve

現在，如果我們在瀏覽器中導航到http://localhost:8080/，就能看到app了！

完美！

那么另一個創建Vue 3項目的途徑是怎么做呢？

Vite

Vite是一個新的Vue 3構建工具，它在開發過程中使用ES Module導入來提供代碼，而不是使用webpack等工具捆綁。

Vite由Vue的創建者構建，它大大加快了開發速度，而且允許更快的熱重載和更高效的冷服務器啟動。

Vite消除了僅按需編譯代碼（僅編譯現在影響當前屏幕的代碼）的捆綁過程。這意味著你不必等待整個項目捆綁在一起即可開始開發。

由于捆綁大型項目可能需要很長時間，因此Vite具有加快開發過程的巨大潛力。

為什么要使用Vue Vite？

現在你可能會問，“那么Vite與現有的vue-cli究竟有什么不同？

由于@vue-cli/service是建立在webpack之上的，因此它是一個模塊捆綁器，將在啟動、熱重載和編譯時捆綁整個Vue項目。

而Vue Vite將在代碼中采用ES Import語法，讓瀏覽器解析導入并為每次導入發出HTTP請求。

Vue Vite在開發過程中提供比基于捆綁器這個解決方案更快的啟動、熱重載和編譯速度。

當然，通過HTTP請求處理導入可能會創建網絡瀑布并減慢速度。但由于這種方法僅適用于本地開發，因此這些差異一般可忽略不計。

此外，正如我們稍后將討論的那樣，Vite項目捆綁用于生產從而完全避免這方面問題，真的是輕而易舉。

創建第一個Vite項目

為了使用Vite，我們需要運行

npm create vite@latest

然后，只需進入項目文件夾，安裝依賴項，然后使用以下命令運行app。

cd <project-name>
npm install
npm run dev

現在，我們用瀏覽器打開http://localhost:3000，那么就可以看到以下app。

你應該知道的一些Vue Vite功能

1. 捆綁項目進行生產

Vite的目標是使Vue的開發和生產盡可能簡單。盡管在開發過程中沒有捆綁，但是要捆綁項目以進行生產也非常容易。

你所要做的就是運行npm run build。

如果我們查看package.json，那么就會發現這是在調用vite build——它和其他構建過程一樣，將捆綁Vue項目并準備dist文件夾來提供服務。

2. 管理網址

與其他Vue項目設置一樣，Vite提供了兩種引用資源的方式。

• 絕對路徑引用 – 使用公用文件夾。這些資源使用/_file.extension_引用，并將在構建項目時復制到dist文件夾的根目錄。
• 相對路徑引用 – 例如，根據文件夾的文件結構相對訪問src/assets文件夾中的文件。生成項目時，整個文件夾將作為_assets放置在dist文件夾中。

3. 內置TypeScript支持

Vue 3最大的變化之一是使用TypeScript重寫了核心庫——允許根據IDE進行類型檢查和更好的錯誤消息。

Vue Vite也可以與Vue 3集成，為.ts文件和SFC中的TypeScript<script>提供內置的TypeScript支持。

了解 Vue 3 組件

在設置了Vue 3 app，了解了Vue 3 Vite工具之后，現在讓我們來看看這些組件是如何工作的。

Vue 3最大的變化是引入了Composition API。在這個新結構中，我們能夠按功能組織代碼，而不僅僅是通過數據、計算等來分隔代碼。

這使我們能夠創建更加模塊化、可讀和可擴展的代碼，因為可以把單個功能的代碼編寫在同一個代碼區域中。

如果我們打開src/components/HelloWorld.vue文件，可以看到與Vue2中相同的代碼——稱為Options API。

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String,
  },
  data() {
    return {
      count: 0,
    }
  },
}
</script>

上述代碼展示了我們如何在Vue 3中使用“舊的”語法。

本教程接下來還將介紹如何在新的Composition API中執行此操作，并確定Option API的更改。

Composition API中的響應式數據

在SFC的腳本部分，我們首先從vue core庫導入一些東西，以便創建響應式變量。

import { ref } from 'vue'

然后，用如下所示的setup函數替換原來的data選項。

import { ref } from 'vue'
export default {
  setup() {
    return {}
  },
}

這個setup方法在創建組件時運行，我們可以在其中定義想要組件使用的所有響應式數據、計算屬性、方法等。

然后，setup方法返回的任何內容都可以在模板中訪問！

使用ref創建響應式數據

為了便于展示，我們先在模板中使用v-model創建一個文本輸入框。

<template>
  <div>
    <h2>Filter LearnVue Articles</h2>
    <input type="text" placeholder="Filter Search" v-model="query" />
    {{ query }}
  </div>
</template>

讓我們使用ref創建響應式查詢變量，然后從setup方法返回。

export default {
  setup() {
    const query = ref('')
    return {
      query,
    }
  },
}

好的，現在如果我們回到app，就可以看到使用Composition API的響應式數據。

是不是很贊？

接下來，讓我們在輸入中添加按鈕，看看如何在Composition API中創建方法。

Composition API中的方法

在Option API中，Vue對象有一個專用于方法的屬性。

對于較大的文件，這意味著數據可能與使用它的方法相距數百行，從而使組件更難閱讀和維護。

而Composition API，一切都放于setup方法中，這意味著我們可以根據功能組織代碼，甚至可以將共同特征提取到它們自己的代碼模塊中。

讓我們創建一個reset方法，該方法接受ref并將其設置為空字符串。

export default {
  setup() {
    const query = ref('')
    const reset = (evt) => {
      query.value = '' // clears the query
    }
    return {
      reset,
      query,
    }
  },
}

需要注意的一件事是，我們需要調用query.value才能訪問數據的值。

為什么？

如果我們執行console.log(query)，那么將看到它并不是一個字符串值，而是一個Proxy對象。Proxy中的陷阱使我們能夠輕松獲取數據，但這也恰恰就是為什么我們需要在ref調用.value的原因。

然后，就像在Option API中一樣，我們可以向模板添加按鈕，以便在單擊時調用此reset方法。

<button @click="reset">Reset</button>

現在，當我們使用新的輸入框代碼構建應用程序時，將如下所示。

為Vue 3項目添加第二個組件

有了輸入和查詢數據的組件，不妨實際創建一個results組件來顯示結果。

我們將其命名為SearchResults.vue。要將其添加到HelloWorld.vue代碼，首先必須導入，接著在導出默認值中進行聲明。

<script>
import { ref } from 'vue'
import SearchResults from './SearchResults.vue'
export default {
  components: {
    SearchResults,
  },
  // ...
}
</script>

然后，我們可以像這樣將其添加到模板中。

<template>
  <div>
    <h2>Filter LearnVue Articles</h2>
    <input type="text" placeholder="Filter Search" v-model="query" />
    <br />
    <button @click="reset">Reset</button>
    <search-results />
  </div>
</template>

那么怎么使用來自HelloWorld組件的查詢字符串呢？請繼續往下看。

傳遞props

Vue props允許父組件將數據傳遞給其子組件。這里我們希望將查詢字符串從HelloWorld.vue傳遞到SearchResults.vue。

我們可以通過在HelloWorld.vue內的<search-result>標簽中添加一個屬性來做到這一點。

<search-results :query="query" />

超級簡單吧！

訪問props

讓我們在SearchResults.vue中創建組件的主結構代碼，并從JSON文件中導入所有文章信息。

import titles from "../post-data.json";
export default {
  setup(props, context) {},
};

然后，我們需要幾個步驟來訪問props。

首先，必須在props選項中聲明，告訴組件我們期望什么prop以及執行我們指定的prop驗證。

export default {
  props: {
    query: String,
  },
  setup(props, context) {
    // ...
  },
}

如果你仔細查看setup方法，你會發現它接受兩個參數。

• props – 包含傳遞給組件的所有參數
• context – 包含attrs、slots和emit。

我們將使用props在setup方法中訪問props的值。

我們需要做的就是使用計算屬性通過查詢屬性過濾文章列表。

計算屬性

與使用ref類似，也需要導入到項目中。

import { computed } from 'vue'

然后像這樣設置它，其中的計算屬性接受getter方法。只要有依賴項更改，這個getter方法就會更新計算屬性。

import { computed } from 'vue'
import titles from '../post-data.json'
export default {
  props: {
    query: String,
  },
  setup(props, context) {
    const filteredTitles = computed(() => {})
    return {
      filteredTitles,
    }
  },
}

在上面的方法中，我們希望使用query prop過濾所有標題。

再將所有內容都轉換為小寫，那就不必擔心大小寫問題。

const filteredTitles = computed(() => {
  return titles.filter((s) =>
    s.Name.toLowerCase().includes(props.query.toLowerCase())
  )
})

到現在就快差不多了！

剩下要做的就是實際使用模板來顯示數據！下面的代碼使用了v-for循環：

<template>
  <div class="root">
    <p>Showing {{ filteredTitles.length }} results for "` query `"</p>
    <ul>
      <li v-for="title in filteredTitles" :key="title.Page">
        {{ title.Name }}
      </li>
    </ul>
  </div>
</template>

就是這樣。

來看看最終的成果吧。

Vue 3項目中的生命周期鉤子

在開始使用Vue 3之前，還有一件要知道的事是如何使用Vue生命周期鉤子。

與Composition API的其他部分一樣，我們必須導入生命周期鉤子并在setup方法中進行聲明，才能使用生命周期鉤子。

下面是如何使用生命周期鉤子的快速示例。

import { computed, onMounted } from 'vue'
export default {
  setup() {
    onMounted(() => {
      console.log('mounted')
    })
  },
}

總結

Vue 3有很多很酷的功能，對于創建可擴展Vue app非常有用。看完本教程，有沒有興趣自己動手試試看呢？