區(qū)別

1、ref定義一般基本數(shù)據(jù)類型，也可定義數(shù)組和對(duì)象。訪問(wèn)添加.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定義數(shù)組和對(duì)象，不可定義基本數(shù)據(jù)類型，訪問(wèn)可直接訪問(wèn)

const pageConfig = reactive({
    pageNum: 1,
    pageSize: 10
}) // 定義
const onChange = () => {
    pageConfig.pageNum = 2;
    pageConfig.pageSize = 20;
}
<!-- Vue3模板引用使用 -->
<Page :current="pageConfig.pageNum"></Page>

3、定義數(shù)組

// 方法一：改為 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解構(gòu)，再使用push方法
}
// 方法三：定義時(shí)數(shù)組外層嵌套一個(gè)對(duì)象
const tableData = reactive({ list:[] })
const getTableData = async () => {
    const { data } = await getTableDataApi()
    tableData.list = data // 通過(guò)訪問(wèn)list屬性重新賦值
}

image.png

具體使用

image.png

image.png