reactive只对深层次响应式有影响

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

Vue3 深层次响应式

---

前言

reactive只对深层次响应式有影响

---

一、reactive是什么？

reactive是Vue3响应式语法，可传递Object和[]两种类型
eg: reactive([1,2,3,4,5,6])
reactive({
foo: ‘123’,
name: ‘456’
})

二、在异步给reactive赋值时会破坏结构

1.对于数组三秒之后无法赋值

代码如下（示例）：

let state = reactive([])
setInterval(() => {
  state = [1,2,34,5,6]
},3000)

2.对于对象可以成功进行赋值

代码如下（示例）：

let state = reactive({name: '123456'})
setInterval(() => {
  state.name = '7894561'
},3000)

---

总结

由此可以得出两种解决方案
1.直接设为对象进行赋值

type list = {
  numberType: number[]
} // 设置一个数组属性
let state = reactive<list>({numberType: []})
setInterval(() => {
  state.numberType = [1,2,3,4,5,6,7]
},3000)

2.在不破坏结构的情况下往里加值

let state = reactive([])
setInterval(() => {
	let arr = [1,2,3,4,5,6,7]
  	state.push(...arr)
},3000)