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 相关文章推荐
IE6下出现JavaScript未结束的字符串常量错误的解决方法
Nov 21 Javascript
jQuery UI的Dialog无法提交问题的解决方法
Jan 11 Javascript
js 判断checkbox是否选中的操作方法
Nov 09 Javascript
jQuery动态地获取系统时间实现代码
May 24 Javascript
jQuery快速上手:写jQuery与直接写JS的区别详细解析
Aug 26 Javascript
jQuery插件datepicker 日期连续选择
Jun 12 Javascript
简单谈谈node.js 版本控制 nvm和 n
Oct 15 Javascript
JavaScript使用forEach()与jQuery使用each遍历数组时return false 的区别
Aug 26 Javascript
原生JS+Canvas实现五子棋游戏
May 28 Javascript
layui清空,重置表单数据的实例
Sep 12 Javascript
js实现漂亮的星空背景
Nov 01 Javascript
原生JS与JQ获取元素的区别详解
Feb 13 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
是否存在第一台收音机的说法
2021/03/01 无线电
PHP文件去掉PHP注释空格的函数分析(PHP代码压缩)
2013/07/02 PHP
php环境套包 dedeampz 伪静态设置示例
2014/03/26 PHP
Laravel如何创建服务器提供者实例代码
2019/04/15 PHP
无语,javascript居然支持中文(unicode)编程!
2007/04/12 Javascript
你需要知道的JavsScript可以做什么?
2007/06/29 Javascript
用js查找法实现当前栏目的高亮显示的代码
2007/11/24 Javascript
javascript 面向对象编程基础:封装
2009/08/21 Javascript
JavaScript学习笔记(十七)js 优化
2010/02/04 Javascript
优化innerHTML操作(提高代码执行效率)
2011/08/20 Javascript
jquery自定义类似$.ajax()的方法实现代码
2013/08/13 Javascript
Jqgrid表格随窗口大小改变而改变的简单实例
2013/12/28 Javascript
javascript中setTimeout的问题解决方法
2014/05/08 Javascript
JS实现自动切换文字的导航效果代码
2015/08/27 Javascript
使用Jasmine和Karma对AngularJS页面程序进行测试
2016/03/05 Javascript
javascript 小数乘法结果错误的处理方法
2016/07/28 Javascript
微信小程序中input标签详解及简单实例
2017/05/18 Javascript
vue中配置mint-ui报css错误问题的解决方法
2017/10/11 Javascript
vue scroller返回页面记住滚动位置的实例代码
2018/01/29 Javascript
深入浅析Vue中的 computed 和 watch
2018/06/06 Javascript
详解vue使用vue-layer-mobile组件实现toast,loading效果
2018/08/31 Javascript
详解vue中router-link标签所必备了解的属性
2019/04/15 Javascript
小程序实现简单语音聊天的示例代码
2020/07/24 Javascript
python机器学习之神经网络实现
2018/10/13 Python
Python3实现的简单工资管理系统示例
2019/03/12 Python
pycharm实现在子类中添加一个父类没有的属性
2020/03/12 Python
信息专业个人的自我评价
2013/12/27 职场文书
18岁生日感言
2014/01/12 职场文书
毕业生自荐书
2014/02/02 职场文书
公务员考察材料
2014/12/23 职场文书
2015最新学生自我评价范文
2015/03/03 职场文书
紧急迫降观后感
2015/06/15 职场文书
学习社交礼仪心得体会
2016/01/22 职场文书
三好学生竞选稿范文
2019/08/21 职场文书
利用Python多线程实现图片下载器
2022/03/25 Python
vue封装数字翻牌器
2022/04/20 Vue.js