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获取当前ip的代码
May 10 Javascript
关于可运行代码无法正常执行的使用说明
May 13 Javascript
js的逻辑运算符 ||
May 31 Javascript
jquery实现table鼠标经过变色代码
Sep 25 Javascript
Jquery中使用show()与hide()方法动画显示和隐藏图片
Oct 08 Javascript
分享JavaScript与Java中MD5使用两个例子
Dec 23 Javascript
浅析JS运动
Dec 28 Javascript
JavaScript中匿名函数的递归调用
Jan 22 Javascript
jQuery返回定位插件详解
May 15 jQuery
JavaScript数据结构之单链表和循环链表
Nov 28 Javascript
使用pm2自动化部署node项目的方法步骤
Jan 28 Javascript
JS前端canvas交互实现拖拽旋转及缩放示例
Aug 05 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笔记之:日期函数的使用介绍
2013/04/24 PHP
php简单判断文本编码的方法
2015/07/30 PHP
关于取不到由location.href提交而来的上级页面地址的解决办法
2009/07/30 Javascript
JavaScript数组前面插入元素的方法
2015/04/06 Javascript
基于jquery实现放大镜效果
2015/08/17 Javascript
jquery实现华丽的可折角广告代码
2015/09/02 Javascript
JavaScript对象数组的排序处理方法
2015/10/21 Javascript
JS传递对象数组为参数给后端,后端获取的实例代码
2016/06/28 Javascript
NodeJS使用formidable实现文件上传
2016/10/27 NodeJs
微信开发之调起摄像头、本地展示图片、上传下载图片实例
2016/12/08 Javascript
详解webpack进阶之插件篇
2017/07/06 Javascript
浅谈Vue.js 中的 v-on 事件指令的使用
2018/11/25 Javascript
Nodejs异步流程框架async的方法
2019/06/07 NodeJs
JavaScript组合设计模式--改进引入案例分析
2020/05/23 Javascript
Element Badge标记的使用方法
2020/07/27 Javascript
vue实现虚拟列表功能的代码
2020/07/28 Javascript
[04:13]2018国际邀请赛典藏宝瓶Ⅱ饰品一览
2018/07/21 DOTA
python中print()函数的“,”与java中System.out.print()函数中的“+”功能详解
2017/11/24 Python
对python3 一组数值的归一化处理方法详解
2018/07/11 Python
对python3 中方法各种参数和返回值详解
2018/12/15 Python
python DataFrame 取差集实例
2019/01/30 Python
django中上传图片分页三级联动效果的实现代码
2019/08/30 Python
Python实现socket非阻塞通讯功能示例
2019/11/06 Python
Virtualenv 搭建 Py项目运行环境的教程详解
2020/06/22 Python
python3 循环读取excel文件并写入json操作
2020/07/14 Python
详解python中的异常捕获
2020/12/15 Python
HTML5 解析规则分析
2009/08/14 HTML / CSS
全球最大的跑步用品商店:Road Runner Sports
2016/09/11 全球购物
口腔工艺技术专业毕业生自荐信
2013/09/27 职场文书
临床医学应届生求职信
2013/11/06 职场文书
产品质量承诺书
2014/03/27 职场文书
法人代表委托书
2014/04/04 职场文书
2014年五四青年节演讲稿范文
2014/04/22 职场文书
国旗下演讲稿
2014/05/08 职场文书
企业法人代表任命书
2014/06/06 职场文书
安全生产一岗双责责任书
2014/07/28 职场文书