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 多级下拉菜单核心代码
May 21 Javascript
jquery 注意事项与常用语法小结
Jun 07 Javascript
限制上传文件大小和格式的jQuery插件实例
Jan 24 Javascript
JavaScript中标识符提升问题
Jun 11 Javascript
js实现表单多按钮提交action的处理方法
Oct 24 Javascript
jQuery.Uploadify插件实现带进度条的批量上传功能
Jun 08 Javascript
JS类的定义与使用方法深入探索
Nov 26 Javascript
如何将HTML字符转换为DOM节点并动态添加到文档中详解
Aug 19 Javascript
JavaScript常用事件介绍
Jan 21 Javascript
9102年webpack4搭建vue项目的方法步骤
Feb 20 Javascript
JavaScript函数式编程(Functional Programming)箭头函数(Arrow functions)用法分析
May 22 Javascript
Vue实现图片与文字混输效果
Dec 04 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
雄兵连:第三季确定会出,不过时间未定,鹤熙是第三季的主角!
2020/03/13 国漫
PHP6 mysql连接方式说明
2009/02/09 PHP
php比较两个字符串长度的方法
2015/07/13 PHP
PHP读取文本文件并逐行输出该行使用最多的字符与对应次数的方法
2016/11/25 PHP
PHP实现文件下载【实例分享】
2017/04/28 PHP
php 猴子摘桃的算法
2017/06/20 PHP
找出字符串中出现次数最多的字母和出现次数精简版
2012/11/07 Javascript
javascript 实现 原路返回
2015/01/21 Javascript
jquery插件jquery.nicescroll实现图片无滚动条左右拖拽的方法
2015/08/10 Javascript
jQuery实现垂直半透明手风琴特效代码分享
2015/08/21 Javascript
BootStrap和jQuery相结合实现可编辑表格
2016/04/21 Javascript
ECMAScript6快速入手攻略
2016/07/18 Javascript
JavaScript 动态三角函数实例详解
2017/01/08 Javascript
Vuex之理解state的用法实例
2017/04/19 Javascript
Three.js实现浏览器变动时进行自适应的方法
2017/09/26 Javascript
详解JS实现简单的时分秒倒计时代码
2019/04/25 Javascript
微信小程序从注册账号到上架(图文详解)
2019/07/17 Javascript
angularjs请求数据的方法示例
2019/08/06 Javascript
解决微信小程序中的滚动穿透问题
2019/09/16 Javascript
小程序中使用css var变量(使js可以动态设置css样式属性)
2020/03/31 Javascript
vue+iview框架实现左侧动态菜单功能的示例代码
2020/07/23 Javascript
python操作数据库之sqlite3打开数据库、删除、修改示例
2014/03/13 Python
Python抓取京东图书评论数据
2014/08/31 Python
Python函数式编程指南(二):从函数开始
2015/06/24 Python
浅析python中SQLAlchemy排序的一个坑
2017/02/24 Python
详解tensorflow载入数据的三种方式
2018/04/24 Python
python 用for循环实现1~n求和的实例
2019/02/01 Python
pandas DataFrame 行列索引及值的获取的方法
2019/07/02 Python
读书心得体会
2013/12/28 职场文书
幼儿园实习生辞职信
2014/01/20 职场文书
明信片寄语大全
2014/04/08 职场文书
《少年王冕》教学反思
2014/04/11 职场文书
开展批评与自我批评发言材料
2014/05/15 职场文书
庆国庆活动总结
2014/08/28 职场文书
python中的装饰器该如何使用
2021/06/18 Python
微信小程序 WeUI扩展组件库的入门教程
2022/04/21 Javascript