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 相关文章推荐
JavaScript 自动完成脚本整理(33个)
Oct 20 Javascript
JQuery操作单选按钮以及复选按钮示例
Sep 23 Javascript
jQuery实现购物车计算价格功能的方法
Mar 25 Javascript
window.onload与$(document).ready()的区别分析
May 30 Javascript
JS实现兼容性较好的随屏滚动效果
Nov 09 Javascript
jquery验证邮箱格式是否正确实例讲解
Nov 16 Javascript
jQuery中通过ajax调用webservice传递数组参数的问题实例详解
May 20 Javascript
Jquery 整理元素选取、常用方法一览表
Nov 26 Javascript
bootstrap——bootstrapTable实现隐藏列的示例
Jan 14 Javascript
JS正则替换去空格的方法
Mar 24 Javascript
Node.js中的require.resolve方法使用简介
Apr 23 Javascript
JS实现的字符串数组去重功能小结
Jun 17 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
使用swoole扩展php websocket示例
2014/02/13 PHP
利用php生成验证码
2017/02/23 PHP
深入讲解PHP的对象注入(Object Injection)
2017/03/01 PHP
PHP面向对象之工作单元(实例讲解)
2017/06/26 PHP
php压缩文件夹最新版
2018/07/18 PHP
用js实现小球的自由移动代码
2013/04/22 Javascript
js的[defer]和[async]属性
2014/11/24 Javascript
关于Javascript加载执行优化的研究报告
2014/12/16 Javascript
Javascript writable特性介绍
2015/02/27 Javascript
js正则匹配出所有图片及图片地址src的方法
2015/06/08 Javascript
JS实现可调整倒计时间代码分享
2015/08/18 Javascript
如何屏蔽防止别的网站嵌入框架代码
2015/08/24 Javascript
AngularJS通过ng-route实现基本的路由功能实例详解
2016/12/13 Javascript
遍历json获得数据的几种方法小结
2017/01/21 Javascript
vuejs实现递归树型菜单组件
2018/01/13 Javascript
vue axios 表单提交上传图片的实例
2018/03/16 Javascript
vue中父子组件注意事项,传值及slot应用技巧
2018/05/09 Javascript
Vue.js数字输入框组件使用方法详解
2019/10/19 Javascript
vuex存储复杂参数(如对象数组等)刷新数据丢失的解决方法
2019/11/05 Javascript
JavaScript实现文件下载并重命名代码实例
2019/12/12 Javascript
浅析JS中NEW的实现原理及重写
2020/02/20 Javascript
[54:06]OG vs TNC 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
[43:03]完美世界DOTA2联赛PWL S2 PXG vs Magma 第二场 11.21
2020/11/24 DOTA
CSS实现圆形放大镜狙击镜效果 只有圆圈里的放大
2012/12/10 HTML / CSS
css3 中translate和transition的使用方法
2020/03/26 HTML / CSS
总经理助理职责
2014/02/04 职场文书
总账会计岗位职责
2014/03/13 职场文书
无刑事犯罪记录证明范本
2014/09/29 职场文书
开展党的群众路线教育实践活动情况汇报
2014/11/05 职场文书
合作合同协议书范本
2015/01/27 职场文书
学生逃课检讨书
2015/02/17 职场文书
致短跑运动员加油稿
2015/07/21 职场文书
2016年春季运动会广播稿
2015/08/19 职场文书
2016幼儿园中班开学寄语
2015/12/03 职场文书
导游词之桂林山水
2019/09/20 职场文书
MySQL 使用事件(Events)完成计划任务
2021/05/24 MySQL