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

  1. 把用reactive来定义的数组换为ref进行定义
setup(){
    let data = ref([])
    ...
    request.get("/***).then(res => {
        data.value = res.data.records
    })
    return { data }
}
  1. 原来定义的是一个数组所以使用push方法将接收到的内容传进数组中，但是需要将数据展开才能传进去，需要在数据前加三个小数点
setup(){
    let data = reactive([])
    ...
    request.get("/***").then(res => {
      data.push = ...res.data.records
    })
 
    return { data }
}
  1. 在原来的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操作源对象内部的数据。

注意reactive数据直接赋值将失去响应式
  • 原因：因为reactive数据被重新赋值后，原来数据的代理函数和最新数据的代理函数不是同一个
var dataList = reactive([]);

window["appCallJsListInit"] = (e) => {
       dataList = e
};

参考：链接1
参考：链接2

©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容