Vue3中reactive对从接口中接收到的数组做响应式处理

最新推荐文章于 2024-06-18 23:55:16 发布

红木川川

最新推荐文章于 2024-06-18 23:55:16 发布

阅读量7.2k

点赞数 2

分类专栏：前端框架学习文章标签： vue

本文链接：https://blog.csdn.net/weixin_51483018/article/details/125669921

版权

前端框架学习专栏收录该内容

1 篇文章 1 订阅

订阅专栏

本文详细介绍了在Vue中ref和reactive的区别及其使用方法。ref适用于定义基本类型、数组和对象，内部会转换为reactive。reactive通过Proxy实现响应式，主要用于对象类型。在处理数组时，ref可以更直接地更新数组，而reactive则需要通过扩展运算符(...)来更新。总结了三种不同的数据处理方式，并提供了实际代码示例。

摘要由CSDN通过智能技术生成

第一种方法：把用reactive来定义的数组换为ref进行定义

setup(){
    let data = ref([])
    ...
    request.get("/***).then(res => {
        data.value = res.data.records

    })

    return { data }
}

第二种方法：原来定义的是一个数组所以使用push方法将接收到的内容传进数组中，但是需要将数据展开才能传进去，需要在数据前加三个小数点

setup(){
    let data = reactive([])
    ...
    request.get("/***").then(res => {
      data.push = ...res.data.records
    })

    return { data }
}

第三种方法：在原来的reactive里面再封装一层{ }

setup(){
    let data = reactive({
        arr : []
    })
    ...
    request.get("/***").then(res => {

        data.arr = res.data.records

    })

    return { data }

}

总结一下 ref 和 reactive 的区别：

ref 是用来定义基本类型和数组类型和对象类型的，使用ref定义数组或对象类型时内部还是会调用reactive 转为代理对象

reactive 一般用来定义对象类型，它是通过使用Proxy（代理模式）来实现响应式, 并通过Reflect操作源对象内部的数据。