vue检测对象和数组的变化分析


Posted in Javascript onJune 30, 2018

在 JavaScript 中对象和数组是引用类型,指向同一个内存空间,如果 prop 是一个对象或数组,在子组件内部改变它会影响父组件的状态。可以直接在子组件修改对象或数组,但是并不会数据改变就会引起变化。

检测对象变化

1、不能检测到对象属性的添加或删除

var vm = new Vue({
 data:{
   data111:{
     a = 1
   }
 }
})

data111.a = 2;//这个可以引起变化

但data111.b = 2;和vm.b = 2这个不能检测到变化

需要用

Vue.set(object, key, value)

比如$set(data111, b, 2);

或者:

$set(key,value)

比如vm.$set(‘b', 2);

检测数组变化

下面两种情况不能检测到变化:

1、直接通过索引设置元素,如arr[0]=12;

2、直接修改数组的长度,如vm.arr.length

Vue.set( object, key, value )

用法:

this.$set(this.arr,0,12)

Javascript 相关文章推荐
采用CSS和JS,刚好我最近有个站点要用到下拉菜单!
Jun 26 Javascript
常用参考资料(手册)下载或者链接
Jul 22 Javascript
JS 图片缩放效果代码
Jun 09 Javascript
js实现快速分享功能(你的文章分享工具)
Jun 25 Javascript
禁止页面刷新让F5快捷键及右键都无效
Jan 22 Javascript
JavaScript运动减速效果实例分析
Aug 04 Javascript
js实现非常棒的弹出div
Oct 06 Javascript
js与jquery分别实现tab标签页功能的方法
Nov 18 Javascript
浅谈JavaScript闭包
Apr 09 Javascript
JavaScript工具库之Lodash详解
Jun 15 Javascript
javascript移动端 电子书 翻页效果实现代码
Sep 07 Javascript
解决Vue + Echarts 使用markLine标线(precision精度问题)
Jul 20 Javascript
浅析vue.js数组的变异方法
Jun 30 #Javascript
详解vue添加删除元素的方法
Jun 30 #Javascript
vue.js删除列表中的一行
Jun 30 #Javascript
vue v-model动态生成详解
Jun 30 #Javascript
vue-router+nginx 非根路径配置方法
Jun 30 #Javascript
Vue项目中添加锁屏功能实现思路
Jun 29 #Javascript
angular6.0开发教程之如何安装angular6.0框架
Jun 29 #Javascript
You might like
PHP+MYSQL的文章管理系统(一)
2006/10/09 PHP
PHP中设置一个严格30分钟过期Session面试题的4种答案
2014/07/30 PHP
Thinkphp搭建包括JS多语言的多语言项目实现方法
2014/11/24 PHP
PHP实现WebService的简单示例和实现步骤
2015/03/27 PHP
PHP hebrev()函数用法讲解
2019/02/21 PHP
[原创]保存的js无法执行的解决办法
2007/02/25 Javascript
让页面上两个div中的滚动条(滑块)同步运动示例
2013/08/07 Javascript
js 走马灯简单实例
2013/11/21 Javascript
js 采用delete实现继承示例代码
2014/05/20 Javascript
js改变embed标签src值的方法
2015/04/10 Javascript
JS根据生日算年龄的方法
2015/05/05 Javascript
KnockoutJs快速入门教程
2016/05/16 Javascript
详解JavaScript对象类型
2016/06/16 Javascript
JavaScript暂停和继续定时器的实现方法
2016/07/18 Javascript
JavaScript每天必学之事件
2016/09/18 Javascript
JavaScript中原型链存在的问题解析
2016/09/25 Javascript
JavaScript中双符号的运算详解
2017/03/12 Javascript
vue监听滚动事件实现滚动监听
2017/04/11 Javascript
基于代数方程库Algebra.js解二元一次方程功能示例
2017/06/09 Javascript
addeventlistener监听scroll跟touch(实例讲解)
2017/08/04 Javascript
vue.extend与vue.component的区别和联系
2018/09/19 Javascript
JS回调函数简单易懂的入门实例分析
2019/09/29 Javascript
vue仿淘宝滑动验证码功能(样式模仿)
2019/12/10 Javascript
[07:03]显微镜下的DOTA2第九期——430圣堂刺客杀戮秀
2014/06/20 DOTA
python 中的列表解析和生成表达式
2011/03/10 Python
python 实现视频流下载保存MP4的方法
2019/01/09 Python
python中random.randint和random.randrange的区别详解
2020/09/20 Python
python爬虫scrapy框架之增量式爬虫的示例代码
2021/02/26 Python
发现两个有趣的CSS3动画效果
2013/08/14 HTML / CSS
HTML5基于flash实现播放RTMP协议视频的示例代码
2020/12/04 HTML / CSS
周仰杰(JIMMY CHOO)英国官方网站:闻名世界的鞋子品牌
2018/10/28 全球购物
医学生实习自我鉴定
2013/09/27 职场文书
预备党员的自我评价
2014/03/12 职场文书
祖国在我心中演讲稿500字
2014/05/04 职场文书
社区反邪教工作方案
2014/06/16 职场文书
2015年小学语文教师工作总结
2015/10/23 职场文书