在 Vue3 中,新增了组合式API,使开发人员能够更轻松地编写可组合、可测试和可重用的代码。它们提供了一种用逻辑分离组件中有用代码的方式。让我们了解如何使用它们。
首先,让我们看一个简单的例子,介绍组合式API如何使用:
import { ref } from 'vue'; export default { setup() { //定义响应式变量 const count = ref(0); //定义响应式方法 const increment = () => { count.value++; }; //返回变量和方法 return { count, increment }; } }
在这个例子中,我们使用了setup()
函数来定义响应式变量和方法,然后从这个函数中返回它们。这些变量和方法可以在组件中使用,就像普通的 data 属性和 methods 方法一样使用。
让我们更深入地了解组合式API的几个特性:
1. 响应式变量和方法
在上面的例子中,我们使用了ref()
函数来定义响应式的 count 变量。这意味着当它发生变化时,组件会自动重新渲染。
2. 生命周期钩子
在 Vue2 中,我们可以使用生命周期钩子函数来控制组件的行为。在 Vue3 中,我们可以使用新的onXXX()
函数代替它们。
import { onMounted } from 'vue'; export default { setup() { onMounted(() => { console.log('组件已经挂载'); }); } }
在这个例子中,我们使用onMounted()
函数来在组件被挂载后立即调用函数。我们可以使用onBeforeMount()
来在组件挂载之前调用函数,同理也可以使用onBeforeUpdate()
,onUpdated()
,onBeforeUnmount()
,onUnmounted()
函数。
3. 全局与局部组合式API
Vue3 可以在全局范围内使用组合式 API,即可以在任何组件中使用它们。要在全局范围内使用它们,可以在应用程序的入口文件中注册它们。同样,我们还可以在组件级别上使用它们,这样有助于分离关注点。
import { ref } from 'vue'; export default { setup(props) { const count = ref(0); console.log(props.msg); return { count }; } }
在这个例子中,我们可以在组件的setup()
函数中访问传递给组件的 props。这样就可以使用它们来生成响应式变量和方法。
组合式API是 Vue3 中一个有用的功能,它使开发人员能够更轻松地编写可组合、可测试和可重用的代码。