Vue3 reactive响应式赋值页面不渲染问题

问题描述：

//声明变量
let data = reactive([])
http().then(res=>{
  data = res.data
  console.log(data)
})
//data数据更新，页面没有渲染，

1、因数据结构而导致的未渲染解决方法：

• 依旧是reactive，可以在外面包一层

//声明
let state = reactive({
  data:[]
})
//赋值
state.data= res.data

• 改为ref赋值

//声明
let data = ref([])
//赋值
data.value = res.data

原因

• ref声明之后赋值，data.value = xxx，只是修改响应式里的value(ref的一个属性)的值，没有影响响应式。

• const data = reactive([]); 声明的时候,data已经是响应式，如果直接赋值，data = res.data，就会将数据覆盖响应式，从而就不会触发页面渲染。

• 当然，不是说reactive不能处理这种数据，

  • 将这个字段包一层之后变成reactive响应式的属性，去更新reactive的属性也不会影响他的响应式
  • 可以修改赋值方式，通过data.push等方法去代替直接‘=’的方式可以保留响应式。

  参考：https://blog.csdn.net/qq_26705343/article/details/124846016

2、因页面节点未加载导致页面未渲染解决方法：

import {nextTick} from 'vue'
const func = async ()=>{
	await nextTick()
	state.data= res.data
}

3、因未指到具体点未渲染解决方法：

const state = reactive({
	data:[{
		name:'tom',
		age:3
	},...]
})
const func = async ()=>{
	//state.data.forEach(item=>{
	//	item.age = 4//未生效
	//})
	state.data.forEach((item,index)=>{
		state.data[index].age = 4
	})
}