问题描述：
// 声明变量
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等方法去代替直接‘=’的方式可以保留响应式。
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
})
}