文章目录
- 1. 什么是组合式 API?
- 2. reactive 函数
- 3. ref 函数
- 4. reactive vs ref
1. 什么是组合式 API?
组合式 API 是 Vue 3 中的一种新特性,它允许我们通过函数来组织组件的逻辑,而不是依赖于选项式 API 中的选项对象。这使得代码更易于组织和重用,并且可以提高开发效率。
2. reactive 函数
reactive
函数用于创建一个响应式的对象,当对象的属性发生变化时,相关的视图将会自动更新。
import { reactive } from 'vue';const state = reactive({count: 0
});// 在模板中使用
{{ state.count }}// 修改状态
state.count++
在上面的示例中,state
对象是响应式的,因此当 state.count
发生变化时,相关的视图将会自动更新。
3. ref 函数
ref
函数用于创建一个包装过的响应式对象,它返回一个带有 value
属性的对象,该属性的值可以被修改。下面是一个示例:
import { ref } from 'vue';const count = ref(0);// 在模板中使用
{{ count.value }}// 修改状态
count.value++
在上面的示例中,count
是一个包装过的响应式对象,我们通过 count.value
来访问和修改其值。
4. reactive vs ref
reactive
用于创建一个包含多个属性的响应式对象,适合于复杂的数据结构。ref
用于创建一个单一的响应式对象,适合于单个值的情况。
在选择使用哪个函数时,需要根据具体的需求来决定。