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

也就是說，在創(chuàng)建這個Vue 3項目的過程中，我們需要使用Composition API構(gòu)建兩個組件。

我們的目標是這樣的：

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

開始

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

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

• Vue CLI
• Vite

Vue CLI

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

Vue CLI是Vue開發(fā)的命令行界面，是Vue生態(tài)系統(tǒng)的基準。在本教程的示例中，我們將通過Vue CLI來創(chuàng)建一個Vue app。

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

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

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

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

cd <PROJECT-NAME>
npm run serve

現(xiàn)在，如果我們在瀏覽器中導(dǎo)航到http://localhost:8080/，就能看到app了！

完美！

那么另一個創(chuàng)建Vue 3項目的途徑是怎么做呢？

Vite

Vite是一個新的Vue 3構(gòu)建工具，它在開發(fā)過程中使用ES Module導(dǎo)入來提供代碼，而不是使用webpack等工具捆綁。

Vite由Vue的創(chuàng)建者構(gòu)建，它大大加快了開發(fā)速度，而且允許更快的熱重載和更高效的冷服務(wù)器啟動。

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

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

為什么要使用Vue Vite？

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

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

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

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

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

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

創(chuàng)建第一個Vite項目

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

npm create vite@latest

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

cd <project-name>
npm install
npm run dev

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

你應(yīng)該知道的一些Vue Vite功能

1. 捆綁項目進行生產(chǎn)

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

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

如果我們查看package.json，那么就會發(fā)現(xiàn)這是在調(diào)用vite build——它和其他構(gòu)建過程一樣，將捆綁Vue項目并準備dist文件夾來提供服務(wù)。

2. 管理網(wǎng)址

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

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

3. 內(nèi)置TypeScript支持

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

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

了解 Vue 3 組件

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

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

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

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

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

上述代碼展示了我們?nèi)绾卧赩ue 3中使用“舊的”語法。

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

Composition API中的響應(yīng)式數(shù)據(jù)

在SFC的腳本部分，我們首先從vue core庫導(dǎo)入一些東西，以便創(chuàng)建響應(yīng)式變量。

import { ref } from 'vue'

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

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

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

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

使用ref創(chuàng)建響應(yīng)式數(shù)據(jù)

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

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

讓我們使用ref創(chuàng)建響應(yīng)式查詢變量，然后從setup方法返回。

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

好的，現(xiàn)在如果我們回到app，就可以看到使用Composition API的響應(yīng)式數(shù)據(jù)。

是不是很贊？

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

Composition API中的方法

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

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

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

讓我們創(chuàng)建一個reset方法，該方法接受ref并將其設(shè)置為空字符串。

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

需要注意的一件事是，我們需要調(diào)用query.value才能訪問數(shù)據(jù)的值。

為什么？

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

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

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

現(xiàn)在，當我們使用新的輸入框代碼構(gòu)建應(yīng)用程序時，將如下所示。

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

有了輸入和查詢數(shù)據(jù)的組件，不妨實際創(chuàng)建一個results組件來顯示結(jié)果。

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

<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組件的查詢字符串呢？請繼續(xù)往下看。

傳遞props

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

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

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

超級簡單吧！

訪問props

讓我們在SearchResults.vue中創(chuàng)建組件的主結(jié)構(gòu)代碼，并從JSON文件中導(dǎo)入所有文章信息。

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

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

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

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

如果你仔細查看setup方法，你會發(fā)現(xiàn)它接受兩個參數(shù)。

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

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

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

計算屬性

與使用ref類似，也需要導(dǎo)入到項目中。

import { computed } from 'vue'

然后像這樣設(shè)置它，其中的計算屬性接受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過濾所有標題。

再將所有內(nèi)容都轉(zhuǎn)換為小寫，那就不必擔心大小寫問題。

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

到現(xiàn)在就快差不多了！

剩下要做的就是實際使用模板來顯示數(shù)據(jù)！下面的代碼使用了v-for循環(huán)：

<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的其他部分一樣，我們必須導(dǎo)入生命周期鉤子并在setup方法中進行聲明，才能使用生命周期鉤子。

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

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

總結(jié)

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