vuejs视图不能及时更新的问题 ，深入响应式原理

最近三个多月，我和我的同事一起用vuejs 做公司的项目管理系统，因为是第一次用这种双向绑定的框架，难免遇到一些问题。

在做项目时，发现数据并没有实时更新，比如说你用element-ui的时间控件或者上传插件，你虽然更改了时间，或者更改了日期，但是视图并没有更新，奇怪的是，你随便的在旁边某个文本框输入值，视图就更新了，一开始我们很纳闷，到底是什么原因呢？真的是百思不得其解！后面仔仔细细的看了一下官方文档，终于找到了原因，其实这跟Vue的响应式原理有关系（附上官网“深入响应式原理”网址：https://cn.vuejs.org/v2/guide/reactivity.html）；如果你遇到这个问题，自然就知道我说的是什么，如果没遇到，最好也能详细的读官网的这篇文章！

那么我接下来就讲讲什么是响应式原理，当然我的理解可能不对，完全是主观的写这篇文章，正解应该到官网上查看。因为任何一门语言或者框架，其实官网已经说得非常明白了，只是我们大部分人习惯性的百度，然后是大部分无用的信息，对解决问题毫无帮助，所以，广大的编程朋友们，官网是最好的教程！我就是因为不认真看教程导致自己走了一些弯路。我也是边走边反思。还好，我很庆幸我明白了这个道理。

不说废话了，开撸。。。。。

我先写一个对象：let submitMesage ={

name：‘小红’，

sex：‘女’，

task：[

{time:'2017',doWhat:'除草'}，

{time:'2018',doWhat:'钓鱼'}

]

   }

如果你在你的视图中循环遍历task中的内容，time和doWhat是响应式的，也许你改更改其中的某个time和doWhat，视图并没有更细，注意我说的是也许，不一定不会更新，我在实际的项目中确实是这样发生的，有些地方能实时更新，有些却不能，如果数据嵌套的层数越多，出现视图不更新的概率就越大！请原谅我用概率来描述这个问题。假如出现视图不更新的情况，如何解决？我们一般定义的数据格式都是类似javaScript的对象，受现代 JavaScript 的限制 (以及废弃 Object.observe)，Vue 不能检测到对象属性的添加或删除。由于 Vue 会在初始化实例时对属性执行 getter/setter 转化过程，所以属性必须在 data 对象上存在才能让 Vue 转换它，这样才能让它是响应的。（红色部分是官网的原话），官网的解释是不能检测到属性的添加或删除！然而我开发中是遇到原有存在的属性的值不能修改。我开发中因为是for循环task数组中的对象，数量也许是不太确定的,对于不太确定的数组，Vue可能就认为你的数组里面的属性是不太确定的，个数也不太确定，所以改了数据，视图并没有主动的更新，Vue认为，你需要手动的去更新了。好吧，我只能这样说服自己了。利用官网的vm.$set方法手动的更新数据。如果对react有认识的朋友，就不难明白为什么要这么做了。reactjs是单项绑定数据的框架，凡是视图

更新必须手动，这样的话我的理解就是更不容易出错。好吧，既然vue提供了解决方案，那就跟着画葫芦吧！想要更新task里的内容只能这

样搞了：this.$set(submitMesage.task,index,{time:"xxx",doWhat:"xxx});其中的index是数组的角标，比如说0,1,2...；

这样视图就更新了！如果我写的有点抽象，请认真看官网！这些理解都是主观并不客观，看看就好，如果是错的，马上抛弃之。。。