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...;
这样视图就更新了!如果我写的有点抽象,请认真看官网!这些理解都是主观并不客观,看看就好,如果是错的,马上抛弃之。。。
vuejs视图不能及时更新的问题 ,深入响应式原理相关推荐
- 【Vuejs】952- 一文带你了解vue2之响应式原理
在面试的过程中也会问到:请阐述vue2的响应式原理?,凡是出现阐述或者理解,一般都是知无不言言无不尽,知道多少说多少.接下来,我来谈谈自己的理解,切记不要去背,一定要理解之后,用自己的语言来描述出来. ...
- Vue.js 深入响应式原理
深入响应式原理 现在是时候深入一下了!Vue 最独特的特性之一,是其非侵入性的响应式系统.数据模型仅仅是普通的 JavaScript 对象.而当你修改它们时,视图会进行更新.这使得状态管理非常简单直接 ...
- 【Vue.js源码解析 一】-- 响应式原理
前言 笔记来源:拉勾教育 大前端高薪训练营 阅读建议:建议通过左侧导航栏进行阅读 课程目标 Vue.js 的静态成员和实例成员初始化过程 首次渲染的过程 数据响应式原理 – 最核心的特性之一 准备工作 ...
- vue 获取响应头里set-cookie的值_最简化 VUE的响应式原理
前言 前端目前两个当家花旦框架 VUE React,它们能够流行开来,响应式原理做出了巨大贡献.毕竟,它通过数据的变更就能够更新相应的视图,极大的将我们从繁琐的DOM操作中解放出来. 所以掌握它们的响 ...
- Vue数据绑定和响应式原理
Vue数据绑定和响应式原理 当实例化一个Vue构造函数,会执行 Vue 的 init 方法,在 init 方法中主要执行三部分内容,一是初始化环境变量,而是处理 Vue 组件数据,三是解析挂载组件.以 ...
- Vue源码解读一:Vue数据响应式原理
这方面的文章很多,但是我感觉很多写的比较抽象,本文会通过举例更详细的解释.(此文面向的Vue新手们,如果你是个大牛,看到这篇文章就可以点个赞,关掉页面了.)通过阅读这篇文章,你将了解到: 1.Vue数 ...
- Vue.js 框架源码与进阶 - Vue.js 源码剖析 - 响应式原理
文章目录 一.准备工作 1.1 Vue 源码的获取 1.2 源目录结构 1.3 了解 Flow 1.4 调试设置 1.5 Vue 的不同构建版本 1.6 寻找入口文件 1.7 从入口开始 二.Vue ...
- vue 数组删除 dome没更新_详解Vue响应式原理
摘要: 搞懂Vue响应式原理! 作者:浪里行舟 原文:深入浅出Vue响应式原理 Fundebug经授权转载,版权归原作者所有. 前言 Vue 最独特的特性之一,是其非侵入性的响应式系统.数据模型仅仅是 ...
- Vue.js响应式原理
Vue.js响应式原理 框架 浏览数:659 2017-9-20 关于Vue.js Vue.js是一款MVVM框架,上手快速简单易用,通过响应式在修改数据的时候更新视图.Vue.js的响应式原理依赖于 ...
最新文章
- 点击展开 表格_Excel里面如何设置默认的表格和透视表样式
- Bluetooth ATT介绍
- c++ map 修改value_C++知识分享之STL容器:set 容器与 map 容器的简单应用
- Android简明开发教程二十一:访问Internet 绘制在线地图
- 网络篇:朋友面试之TCP/IP,回去等通知吧
- centos php 开启libgdgd_CentOS6.5安装Nginx1+MySQL5+PHP5
- 网络虚拟化有几种实现方式_机械零件表面实现镜面的几种加工方式
- 我所见过的最简短、最灵活的javascript日期转字符串工具函数
- 支持了Unicode及各国字符集编码识别]改善IDA6.8对中文等非英语国家的ANSI字符串显示支持不佳的问题...
- pandas之DataFrame
- 《JSP实用教程(第2版)/耿祥义》错误之import属性导入多个包
- IE网页木马 - 使用 JS 实现打开网页后直接运行木马程序
- 安装到到setup support files时,SQL2008安装程序自动消失掉。
- 阿里云如何选择带宽计费模式和带宽值
- Kafka配置kerberos安全认证
- 非负数 正则表达式
- python科研作图系列-01热力图相关性分析
- 计算机符号大写怎么退出,如何输入数字,字母 和 回车换行符,大写字母锁定输入模式怎么退出...
- Jquery WeUI(一)
- 吴恩达机器学习笔记(七)神经网络:代价函数