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 相关文章推荐
jquery实现简单的拖拽效果实例兼容所有主流浏览器(优化篇)
Jun 28 Javascript
使用js Math.random()函数生成n到m间的随机数字
Oct 09 Javascript
jQuery Easyui实现左右布局
Jan 26 Javascript
JS中的forEach、$.each、map方法推荐
Apr 05 Javascript
Angular的Bootstrap(引导)和Compiler(编译)机制
Jun 20 Javascript
Node.js下自定义错误类型详解
Oct 17 Javascript
js实现图片轮播效果学习笔记
Jul 26 Javascript
bootstrap3-dialog-master模态框使用详解
Aug 22 Javascript
web前端vue之CSS过渡效果示例
Jan 10 Javascript
使用vux实现上拉刷新功能遇到的坑
Feb 08 Javascript
electron中使用bootstrap的示例代码
Nov 06 Javascript
vue-router源码之history类的浅析
May 21 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中的路径问题与set_include_path使用介绍
2014/02/11 PHP
编写PHP程序检查字符串中的中文字符个数的实例分享
2016/03/17 PHP
php+redis在实际项目中HTTP 500: Internal Server Error故障排除
2017/02/05 PHP
prototype 1.5相关知识及他人笔记
2006/12/16 Javascript
豆瓣网的jquery代码实例
2008/06/15 Javascript
jQuery获取样式中的背景颜色属性值/颜色值
2012/12/17 Javascript
onbeforeunload与onunload事件异同点总结
2013/06/24 Javascript
jquery制作select列表双向选择示例代码
2014/09/02 Javascript
JavaScript中使用Object.prototype.toString判断是否为数组
2015/04/01 Javascript
基于Javascript实现返回顶部按钮
2016/02/29 Javascript
js鼠标经过tab选项卡时实现切换延迟
2017/03/24 Javascript
无循环 JavaScript(map、reduce、filter和find)
2017/04/08 Javascript
原生js jquery ajax请求以及jsonp的调用方法
2017/08/04 jQuery
vue组件传递对象中实现单向绑定的示例
2018/02/28 Javascript
vuex存值与取值的实例
2019/11/06 Javascript
React 实现车牌键盘的示例代码
2019/12/20 Javascript
JavaScript随机数的组合问题案例分析
2020/05/16 Javascript
JavaScript的垃圾回收机制与内存管理
2020/08/06 Javascript
python网络编程学习笔记(一)
2014/06/09 Python
python通过urllib2获取带有中文参数url内容的方法
2015/03/13 Python
python中assert用法实例分析
2015/04/30 Python
python模块之sys模块和序列化模块(实例讲解)
2017/09/13 Python
python3+requests接口自动化session操作方法
2018/10/13 Python
Python反爬虫技术之防止IP地址被封杀的讲解
2019/01/09 Python
python实现桌面托盘气泡提示
2019/07/29 Python
Python实现微信翻译机器人的方法
2019/08/13 Python
Django自带日志 settings.py文件配置方法
2019/08/30 Python
python数据预处理 :数据抽样解析
2020/02/24 Python
python GUI库图形界面开发之PyQt5动态(可拖动控件大小)布局控件QSplitter详细使用方法与实例
2020/03/06 Python
详解python程序中的多任务
2020/09/16 Python
numpy实现RNN原理实现
2021/03/02 Python
原生 JS+CSS+HTML 实现时序图的方法
2019/07/31 HTML / CSS
奥地利体育网上商店:Gigasport
2019/10/09 全球购物
奉献演讲稿范文
2014/05/21 职场文书
森林防火标语
2014/06/23 职场文书
python爬取新闻门户网站的示例
2021/04/25 Python