vuejs视图不能及时更新的问题 ,深入响应式原理
来源:互联网 发布:券商风险管理 知乎 编辑:程序博客网 时间:2024/05/17 11:37
最近三个多月,我和我的同事一起用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...;
这样视图就更新了!如果我写的有点抽象,请认真看官网!这些理解都是主观并不客观,看看就好,如果是错的,马上抛弃之。。。
- vuejs视图不能及时更新的问题 ,深入响应式原理
- 千万小心IE的session不能及时更新的问题!
- 修改js之后前台页面不能及时更新的问题
- Vuejs的学习笔记1---------响应式原理
- adapter 不能及时更新的原因
- 点击ListView中item时,出现不能及时响应点击事件的问题
- 【深入响应式原理】变化检测问题
- 关于AJAX访问数据库不能及时获得更新数据的问题
- 解决servet和jsp中的session不能及时更新的问题
- Cache,Ensemble等产品中,JS加载不能及时更新的问题
- 解决jenkins打包时不能及时更新到最新代码的问题
- Imageloader缓存问题 导致不能及时更新图片
- cell image不能及时刷新的问题。
- ALV 编辑及时更新的问题
- ALV 编辑及时更新的问题
- Vue $set 数组不能更新视图的问题
- 【Android】widget不能及时更新
- 视图更新的问题
- oracle 导入导出
- Win10和Ubuntu16.04双系统安装详解
- 细谈select函数(C语言)
- Codefources 519E. A and B and Lecture Rooms LCA
- Linux学习笔记
- vuejs视图不能及时更新的问题 ,深入响应式原理
- win10以系统管理员身份打开cmd
- 前端瀑布流布局制作(用javascript)
- 网页源代码保护(禁止右键、复制、另存为、查看源文件)
- spring MVC注解深入研究
- MNIST数据库的理解与转换
- codeforces 720D. Slalom
- AMBARI HDP 官方安装文档
- 使用strlen函数之前没有检查空指针导致的死机