区别
1、ref定义一般基本数据类型，也可定义数组和对象。访问添加.value
let num = ref(0) // 定义
let isShow = ref(false) // 定义
const onChange = () => {
num.value++ // js使用
isShow.value = true // js使用
}
<!-- Vue3模板引用使用 -->
<Modal v-model="isShow"></Modal>
2、reactive定义数组和对象，不可定义基本数据类型，访问可直接访问
const pageConfig = reactive({
pageNum: 1,
pageSize: 10
}) // 定义
const onChange = () => {
pageConfig.pageNum = 2;
pageConfig.pageSize = 20;
}
<!-- Vue3模板引用使用 -->
<Page :current="pageConfig.pageNum"></Page>
3、定义数组
// 方法一：改为 ref 定义
const tableData = ref([])
const getTableData = async () => {
const { data } = await getTableDataApi()
tableData.value = data // 使用.value重新赋值
}
// 方法二：使用 push 方法
const tableData = reactive([])
const getTableData = async () => {
const { data } = await getTableDataApi()
tableData.push(...data) // 先使用...将data解构，再使用push方法
}
// 方法三：定义时数组外层嵌套一个对象
const tableData = reactive({ list:[] })
const getTableData = async () => {
const { data } = await getTableDataApi()
tableData.list = data // 通过访问list属性重新赋值
}
image.png
具体使用
image.png
image.png
