这很棒,因为在 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
方法中,这意味着我们可以根据特性组织代码,甚至将通用特性提取