ref和reactive递归监听

2024-05-15  本文已影响0人  艾希_可可

区别

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
上一篇下一篇

猜你喜欢

热点阅读