vue规定，不能监测到data里的对象未声明的属性，也就是说，新增的对象属性他是无法监测到的！！

对象与数组的更新有一些注意事项，官方文档说的很清楚。

对于数组

• push()
• pop()
• shift()
• unshift()
• splice()
• sort()
• reverse()

以上方法修改数组支持更新！！
对于嵌套数组，你可以使用 forEach 和 map 做修改！
你要根据索引修改数组值或者修改数组长度，这样做：

vm.$set(vm.items, indexOfItem, newValue)
vm.items.splice(newLength)

补充: splice 功能强大（原数组会改变），稍微说一下（后面打印的原数组）.
一个参数，代表切割后的的数组长度

 [1,2,3].splice(2) //[1,2] 等同于改变数组length

两个参数，切割开始下标(包含)，切割长度。

[1,2,3].splice(0,1) //[2,3]

三个参数，切割下标（包含），切割长度，替换数组。

[1,2,3].splice(0,2,4) //[4,3]   
[1,2,3].splice(0,2,4,5) //[4,5,3]

对于对象
还是由于 JavaScript 的限制，Vue 不能检测对象属性的添加或删除，对于已经创建的实例，Vue 不允许动态添加根级别的响应式属性，要添加或更改这样做：

//在单文件里使用用this代替vm
vm.userProfile = Object.assign({}, vm.userProfile, {
  age: 27,
  favoriteColor: 'Vue Green'
})
//或者
Vue.set(object, propertyName, value)

一些注意事项

• 使用了缓存吗（比如keep-alive组件 或者v-once命令） v-once我栽了跟斗！
• 有用到setTmeOut等改变了this的函数，注意改回this指向
• 还有个强制刷新方法 this.$forceUpdate() 放在你更改数据后！
• element组件（如checkbox,input）绑定的值是动态生成的话，需要使用使用上面的方法更新数据!

vue3 已经使用proxy,数组与对象更新的问题将不再是问题，大家是不是很期待了呢

推荐

记一次vue3+vite+vant+axios移动端页面实践(vant上拉加载/下拉刷新，引入axios)

~~这里有一些学习资料：
Vue3+Ts后台项目（偏基础，适合入门）
vue3的数据监测原理（掘金上的大佬分析）

俺以前的文章：
----vue 自定义select组件

—vue中reject与provide

写出来是一个记录和相互学习的目的！

推荐阅读
- 让axios在vue中丝滑起来

你想吃彩虹糖吗？我有长颈鹿，可以挤给你！