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

赋值页面不渲染问题"/>

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

问题描述：

//声明变量
let data = reactive([])
http().then(res=>{data = res.dataconsole.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})
}