美文网首页
ref和reactive递归监听

ref和reactive递归监听

作者: 艾希_可可 | 来源:发表于2024-05-15 17:24 被阅读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

    相关文章

      网友评论

          本文标题:ref和reactive递归监听

          本文链接:https://www.haomeiwen.com/subject/stipjltx.html