【Vue3教程】创建你的第一个Vue 3项目，前端开发学习方法

这很棒，因为在 Vue3 中，我们仍然可以在其中使用 vue2 的语法。

在本教程中，我们将介绍如何在新的Composition API中实现这一点，并从Options API中识别出这些变化。

组合API中的响应性数据

我们首先从vue核心库导入一些东西，以允许我们创建响应式变量。

import { ref } from ‘vue’

然后，让我们用如下所示的setup函数替换data选项。

import { ref } from ‘vue’

export default {

setup () {

return {

}

}

}

这个 setup 方法在组件创建时运行，在这里我们可以定义所有需要组件使用的响应数据、计算属性、方法等。

还有，该setup方法返回的任何内容都可以在模板中访问。

使用 ref 创建响应式数据

为了显示这一点，我们在模板中使用v-model创建一个文本输入。

Filter LearnVue Articles

<input

type=‘text’

placeholder=‘Filter Search’

v-model=‘query’

/>

{ { query }}

我们使用ref创建响应式query变量，然后从setup方法返回它。

setup () {

const query = ref(‘’)

return {

query

}

}

然后，如返回到应用程序，会看到我们使用Composition API获得了响应式数据。

很好！接下来，我们在input中添加一个clear按钮，看看如何在Composition API中创建一个方法。

组合API中的方法

在选项 API中，Vue对象中有一个完整的属性专门用于方法。对于较大的文件，这意味着数据可能在数百行之外的方法中声明，这使得组件更难读取和维护。

在组合API中，一切都在 setup 方法中，这意味着我们可以根据特性组织代码，甚至将通用特性提取