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

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

我們的目標(biāo)是這樣的：

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

開(kāi)始

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

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

• Vue CLI
• Vite

Vue CLI

如果你以前做過(guò)Vue開(kāi)發(fā)，那么一定知道如何使用Vue CLI來(lái)設(shè)置項(xiàng)目。

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

首先，確保擁有最新版本的Vue CLI。我們可以通過(guò)運(yùn)行npm update -g @vue/cli終端來(lái)做到這一點(diǎn)。

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

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

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

cd <PROJECT-NAME>
npm run serve

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

完美！

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

Vite

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

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

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

由于捆綁大型項(xiàng)目可能需要很長(zhǎng)時(shí)間，因此Vite具有加快開(kāi)發(fā)過(guò)程的巨大潛力。

為什么要使用Vue Vite？

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

由于@vue-cli/service是建立在webpack之上的，因此它是一個(gè)模塊捆綁器，將在啟動(dòng)、熱重載和編譯時(shí)捆綁整個(gè)Vue項(xiàng)目。

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

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

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

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

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

為了使用Vite，我們需要運(yùn)行

npm create vite@latest

然后，只需進(jìn)入項(xiàng)目文件夾，安裝依賴(lài)項(xiàng)，然后使用以下命令運(yùn)行app。

cd <project-name>
npm install
npm run dev

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

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

1. 捆綁項(xiàng)目進(jìn)行生產(chǎn)

Vite的目標(biāo)是使Vue的開(kāi)發(fā)和生產(chǎn)盡可能簡(jiǎn)單。盡管在開(kāi)發(fā)過(guò)程中沒(méi)有捆綁，但是要捆綁項(xiàng)目以進(jìn)行生產(chǎn)也非常容易。

你所要做的就是運(yùn)行npm run build。

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

2. 管理網(wǎng)址

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

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

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

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

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

了解 Vue 3 組件

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

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

這使我們能夠創(chuàng)建更加模塊化、可讀和可擴(kuò)展的代碼，因?yàn)榭梢园褑蝹€(gè)功能的代碼編寫(xiě)在同一個(gè)代碼區(qū)域中。

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

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

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

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

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

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

import { ref } from 'vue'

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

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

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

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

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

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

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

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

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

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

是不是很贊？

接下來(lái)，讓我們?cè)谳斎胫刑砑影粹o，看看如何在Composition API中創(chuàng)建方法。

Composition API中的方法

在Option API中，Vue對(duì)象有一個(gè)專(zhuān)用于方法的屬性。

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

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

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

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

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

為什么？

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

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

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

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

為Vue 3項(xiàng)目添加第二個(gè)組件

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

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

<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>

那么怎么使用來(lái)自HelloWorld組件的查詢(xún)字符串呢？請(qǐng)繼續(xù)往下看。

傳遞props

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

我們可以通過(guò)在HelloWorld.vue內(nèi)的<search-result>標(biāo)簽中添加一個(gè)屬性來(lái)做到這一點(diǎn)。

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

超級(jí)簡(jiǎn)單吧！

訪問(wèn)props

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

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

然后，我們需要幾個(gè)步驟來(lái)訪問(wèn)props。

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

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

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

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

我們將使用props在setup方法中訪問(wèn)props的值。

我們需要做的就是使用計(jì)算屬性通過(guò)查詢(xún)屬性過(guò)濾文章列表。

計(jì)算屬性

與使用ref類(lèi)似，也需要導(dǎo)入到項(xiàng)目中。

import { computed } from 'vue'

然后像這樣設(shè)置它，其中的計(jì)算屬性接受getter方法。只要有依賴(lài)項(xiàng)更改，這個(gè)getter方法就會(huì)更新計(jì)算屬性。

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過(guò)濾所有標(biāo)題。

再將所有內(nèi)容都轉(zhuǎn)換為小寫(xiě)，那就不必?fù)?dān)心大小寫(xiě)問(wèn)題。

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

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

剩下要做的就是實(shí)際使用模板來(lái)顯示數(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>

就是這樣。

來(lái)看看最終的成果吧。

Vue 3項(xiàng)目中的生命周期鉤子

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

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

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

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

總結(jié)

Vue 3有很多很酷的功能，對(duì)于創(chuàng)建可擴(kuò)展Vue app非常有用?？赐瓯窘坛蹋袥](méi)有興趣自己動(dòng)手試試看呢？