在這篇文章中，我們將創建一個應用程序，用API掃描電影。我們不會使用目標-導向組件。在文章中，我將解釋新的API是如何工作的，以及我們如何能够通過它來組織應用程序。

當我們完成了，我們會看到這樣的事情：

應用程序將通過Open Movie API資料庫蒐索電影並顯示結果。創建此應用程序的原因是，它很簡單，不分散對新的API研究的注意力，但很複雜，足以顯示API是如何工作的。

項目配寘

為此，我們將利用Vue CLI，迅速創造必要的環境。

在這裡你可以看到默認的資料夾結構：

如果你不想在本地電腦上安裝所有的依賴，你也可以開始一個項目在Codesandbox。該codesandbox有一個很好的啟動項目的最重要的框架，包括Vue。

新的API連接

生成的原始程式碼使用舊的API Vue 2。為了使用新的API Vue 2，我們必須安裝一個佈局挿件。

安裝後，我們必須添加到main.js挿件：

挿件composition是加性的：這意味著你仍然可以創建和使用組件的舊，同時開始使用新的組件的Composition API。

我們有四個部分：

• App.vue：家長組件。他將處理API的挑戰，並與其他部門聯絡。
• Header.vue：主要組件，接收和顯示頁面標題
• movie.vue：它將顯示每部電影。電影對象將作為一個内容。
• 蒐索.vue：它包含一個輸入元件和蒐索按鈕的形式。這個組件將提供一個蒐索標準時，發送的形式。

組件開發

讓我們寫我們的第一部分，領導：

props内容部分的聲明和以前一樣。你列出的變數，期望從父母的成分，作為一個數組或對象。這些變數將在範本{標題}和setup方法可用。

這裡的新方法是setup。它運行在最初的props授權。setup方法可以恢復一個對象，和該對象的内容將與範本上下文合併：這意味著他們可以在範本。這一收回的設施也是對生命週期提出反響的場所。我們將在蒐索部分看到這方面的例子。

然後創建蒐索組件：

蒐索部分跟踪按鍵並保持在movietitle輸入值。當我們完成了，按下發送按鈕，它發送當前的蒐索到父組件。

setup方法有兩個參數。

第一個參數是一個變數的props命名對象。你可以使用一個對象的結構來訪問它的内容。這個選項是無效的，這意味著setup函數將重新啟動時，輸入内容的變化。

第二個參數是上下文的客體。這裡列出的内容，可以在API 2.x：内容，slots，parent，根，emit。

下一個新的元素是ref函數。ref函數的反應性系統的一部分在Vue。調用時，它創建一個反應變數，這是一個值。value内容將具有參數傳遞到ref函數的價值。這是一個圍繞原值的反應外殼。在一個範本，我們不需要提及的value内容，它將打開我們。如果我們把一個對象在ref，它將是完全噴氣的。

反應性意味著，當我們改變對象的值時，在我們的情况下，内容的價值將知道什麼是變化的，它將需要重新顯示連接的範本和重新啟動被跟踪的函數。

它的作用類似於一個對象的數據法返回的内容。

團結一致

下一步是提出一個家長組件的Header和蒐索組件，蘋果組件。它將聽蒐索部分的蒐索事件，並啟動API時，搜索條件的變化，並將發現的電影轉移到電影組件清單。

修改蘋果組件如下：

在這裡，我們使用了兩個新的元素：reactive和watch。

該reactive函數是相當於Vue.observable）在Vue 2。它使所提交的對象是一個噴氣式的：以源對象，並將其轉化為代理）基於ES2015 Proxy。對於從reactive返回的對象，我們可以直接調用内容）（不使用價值），而不是從ref函數返回對象。如果你想找到一個類似的API Vue 2.x，數據方法將匹配它。

reactive對象的一個缺點是，我們不能用setup方法將其擴展到返回的對象。

該watch函數期待一個函數作為輸入參數。它跟踪所有的反應變數內，就像組件做的範本。當我們改變一個反應變數，使用在一個給定的函數，該函數將再次啟動。在我們的例子中，每當蒐索變數的變化，蒐索將被啟動。

還有一個組件，顯示電影的每一個條目：

電影組件接收一個可變的movie顯示和顯示它的名字與影像。一個特殊的部分是，對於alt影像欄位，我們使用基於標題的計算文字。

可計算的computed函數獲取getter的函數，並將返回的變數包裝成反應性的。返回的變數有相同的介面，從ref函數返回。不同的是，它只是閱讀。同樣的getter函數將重新啟動時，其中一個在getter函數內的反應變數將發生變化。如果computed函數返回未經處理的原始值）（

元件重構

我們把他放在蘋果。現在，蘋果組件將僅處理提交的活動：

這是所有的；我們完成了一個新的API Composition小應用程序。

結論

讓我們總結一下我們在這一條中所審議的問題。

Vue 3將提供許多新的功能：

• setup:位於組件中並將控制元件的邏輯，啟動後先準予props，獲取程式和上下文作為參數
• ref:返回一個反作用的變數，啟動一個新的模式，當你改變了，我們可以通過value内容控制其值。
• reactive:返回一個基於代理程式的噴氣式物體），在改變噴氣式變項時，啟動該範本的重複直觀化，我們可以在不影響value效能的情况下更改其值。
• 電腦：根據接收函數的參數返回一個電抗變數，跟踪電抗變數的變化並重新評估變化
• watch：跟踪噴氣變元的變化，並在改變噴氣變元時重新啟動

我希望這個例子向你介紹了新的API，並消除了你對它的懷疑。

原文章：Gábor Soós-建設一個movie search app using the Vue Composition API

這篇文章對你有用嗎？

[1/5]