Vue3中reactive对从接口中接收到的数组做响应式处理
Vue3 中的reactive对接收的数组进行赋值
·
第一种方法:把用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操作源对象内部的数据。
更多推荐
所有评论(0)