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 相关文章推荐
HTML中事件触发列表与解说
Jul 09 Javascript
预加载css或javascript的js代码
Apr 23 Javascript
JavaScript 参数中的数组展开 [译]
Sep 21 Javascript
js关于命名空间的函数实例
Feb 05 Javascript
JavaScript中用sort()方法对数组元素进行排序的操作
Jun 09 Javascript
关于backbone url请求中参数带有中文存入数据库是乱码的快速解决办法
Jun 13 Javascript
bootstrap PrintThis打印插件使用详解
Feb 20 Javascript
JS实现线性表的链式表示方法示例【经典数据结构】
Apr 11 Javascript
Vue 自定义动态组件实例详解
Mar 28 Javascript
Vue中computed、methods与watch的区别总结
Apr 10 Javascript
javascript中的数据类型检测方法详解
Aug 07 Javascript
JS实现百度搜索框
Feb 25 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 sprintf() 函数的应用(定义和用法)
2012/06/29 PHP
PHP的APC模块实现上传进度条
2015/10/27 PHP
ThinkPHP框架实现数据增删改
2017/05/07 PHP
js验证表单第二部分
2006/11/25 Javascript
treepanel动态加载数据实现代码
2012/12/15 Javascript
jquery获取被勾选的checked(选中)的那一行的3列和4列的值
2013/07/04 Javascript
jquery foreach使用示例
2013/09/12 Javascript
Jquery跳到页面指定位置的方法
2014/05/12 Javascript
jquery图片切换实例分析
2015/04/15 Javascript
javascript匀速运动实现方法分析
2016/01/08 Javascript
让DIV的滚动条自动滚动到最底部的3种方法(推荐)
2016/09/24 Javascript
JavaScript面试题(指针、帽子和女朋友)
2016/11/23 Javascript
JS正则RegExp.test()使用注意事项(不具有重复性)
2016/12/28 Javascript
详解JavaScript 中getElementsByName在IE中的注意事项
2017/02/21 Javascript
js 调用百度分享功能
2017/02/27 Javascript
微信小程序 开发MAP(地图)实例详解
2017/06/27 Javascript
JavaScript之Date_动力节点Java学院整理
2017/06/28 Javascript
vue新vue-cli3环境配置和模拟json数据的实例
2018/09/19 Javascript
VUE 动态组件的应用案例分析
2019/12/02 Javascript
Vue组件通信中非父子组件传值知识点总结
2019/12/05 Javascript
[02:40]2014DOTA2 国际邀请赛中国区预选赛 四大豪门抵达华西村
2014/05/23 DOTA
python数据抓取分析的示例代码(python + mongodb)
2017/12/25 Python
python flask web服务实现更换默认端口和IP的方法
2019/07/26 Python
python实现滑雪游戏
2020/02/22 Python
基于Python和C++实现删除链表的节点
2020/07/06 Python
HTML5新增属性data-*和js/jquery之间的交互及注意事项
2017/08/08 HTML / CSS
说说在weblogic中开发消息Bean时的persistent与non-persisten的差别
2013/04/07 面试题
幼儿园教师备课制度
2014/01/12 职场文书
写给老师的表扬信
2014/01/21 职场文书
小学生考试获奖感言
2014/01/30 职场文书
银行求职信怎么写
2014/05/26 职场文书
银行金融服务方案
2014/06/11 职场文书
入党积极分子党支部意见
2015/06/02 职场文书
暑期家教宣传单
2015/07/14 职场文书
2016民族团结先进个人事迹材料
2016/02/26 职场文书
Python selenium的这三种等待方式一定要会!
2021/06/10 Python