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 相关文章推荐
在js中使用"with"语句中跨frame的变量引用问题
Mar 08 Javascript
AlertBox 弹出层信息提示框效果实现步骤
Oct 11 Javascript
12种JavaScript常用的MVC框架比较分析
Nov 16 Javascript
基于jquery编写分页插件
Mar 07 Javascript
js仿3366小游戏选字游戏
Apr 14 Javascript
使用vue.js制作分页组件
Jun 27 Javascript
javascript 分号总结及详细介绍
Sep 24 Javascript
详解jquery easyui之datagrid使用参考
Dec 05 Javascript
使用JavaScript实现一个小程序之99乘法表
Sep 21 Javascript
基于javascript中的typeof和类型判断(详解)
Oct 27 Javascript
JS实现继承的几种常用方式示例
Jun 22 Javascript
在vue项目中使用codemirror插件实现代码编辑器功能
Aug 27 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 url路由入门实例
2014/04/23 PHP
PHP实现搜索地理位置及计算两点地理位置间距离的实例
2016/01/08 PHP
php基于openssl的rsa加密解密示例
2016/07/11 PHP
如何使用PHP给图片加水印
2016/10/12 PHP
PHP时间函数使用详解
2019/03/21 PHP
PHP 实现 WebSocket 协议原理与应用详解
2020/04/22 PHP
Javascript实例教程(19) 使用HoTMetal(1)
2006/12/23 Javascript
jquery如何实现在加载完iframe的内容后再进行操作
2013/09/10 Javascript
Jquery each方法跳出循环,并获取返回值(实例讲解)
2013/12/12 Javascript
使用jQuery操作HTML的table表格的实例解析
2016/03/13 Javascript
jquery实现简单Tab切换菜单效果
2020/07/17 Javascript
ionic进入多级目录后隐藏底部导航栏(tabs)的完美解决方案
2016/11/23 Javascript
基于JS实现的随机数字抽签实例
2016/12/08 Javascript
Angular2入门教程之模块和组件详解
2017/05/28 Javascript
微信小程序分页加载的实例代码
2017/07/11 Javascript
浅谈Vue数据绑定的原理
2018/01/08 Javascript
使用vue官方提供的模板vue-cli搭建一个helloWorld案例分析
2018/01/16 Javascript
Vue项目分环境打包的实现步骤
2018/04/02 Javascript
jQuery.extend 与 jQuery.fn.extend的用法及区别实例分析
2018/07/25 jQuery
基于Vue.js与WordPress Rest API构建单页应用详解
2019/09/16 Javascript
JavaScript正则表达式验证登录实例
2020/03/18 Javascript
微信小程序实现聊天室
2020/08/21 Javascript
Python实现的使用telnet登陆聊天室实例
2015/06/17 Python
python数据类型_字符串常用操作(详解)
2017/05/30 Python
Python金融数据可视化汇总
2017/11/17 Python
Django 使用Ajax进行前后台交互的示例讲解
2018/05/28 Python
Python合并同一个文件夹下所有PDF文件的方法
2019/03/11 Python
python基础 range的用法解析
2019/08/23 Python
python3应用windows api对后台程序窗口及桌面截图并保存的方法
2019/08/27 Python
解决Python Matplotlib绘图数据点位置错乱问题
2020/05/16 Python
如果有两个类A,B,怎么样才能使A在发生一个事件的时候通知B
2016/03/12 面试题
银行竞聘报告范文
2014/11/06 职场文书
2015年个人实习工作总结
2014/12/12 职场文书
经费申请报告范文
2015/05/18 职场文书
详解Python中*args和**kwargs的使用
2022/04/07 Python
Ruby GDBM操作简介及数据存储原理
2022/04/19 Ruby