在这篇文章中，我们将创建一个应用程序，用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]