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等方法去代替直接‘=’的方式可以保留响应式。

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
  })
}