在vue3中ref()或reactive()都可以创建响应式数据,主要区别在于针对的数据类型不同,ref()可以创建所有的数据类型的响应式数据,reactive()仅对对象类型有效(对象、数组和 Map、Set 这样的集合类型),而对string、number 和 boolean这样的基本类型无效。
reactive()
reactive参数必须是对象,其他基本类型无法实现响应式。
要在组件模板中使用响应式状态,需要在setup()函数中定义并返回,如果我们使用了构建工具,在单文件组件中 可以通过下列方式直接使用。
<!-- <script setup> -->
import { reactive } from 'vue'
const state = reactive({ number: 0 })
function increment() {
state.number++
}
<!-- </script> -->
//模板中使用