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 相关文章推荐
7个让JavaScript变得更好的注意事项
Jan 28 Javascript
jQuery+HTML5加入购物车代码分享
Oct 29 Javascript
JS基于正则截取替换特定字符之间字符串操作示例
Feb 03 Javascript
完美实现js选项卡切换效果(二)
Mar 08 Javascript
Bootstrap实现可折叠分组侧边导航菜单
Mar 07 Javascript
Vue实现左右菜单联动实现代码
Aug 12 Javascript
vue中 this.$set的用法详解
Sep 06 Javascript
layui 实现表格某一列显示图标
Sep 19 Javascript
layui 地区三级联动 form select 渲染的实例
Sep 27 Javascript
微信小程序实现侧边栏分类
Oct 21 Javascript
JavaScript实现左右滚动电影画布
Feb 06 Javascript
Vue中引入svg图标的两种方式
Jan 14 Vue.js
浅析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
使用Limit参数优化MySQL查询的方法
2008/11/12 PHP
一个简单的网页密码登陆php代码
2012/07/17 PHP
ThinkPHP调试模式与日志记录概述
2014/08/22 PHP
PHP实现扎金花游戏之大小比赛的方法
2015/03/10 PHP
js 数组操作代码集锦
2009/04/28 Javascript
Javascript玩转继承(二)
2014/05/08 Javascript
JS+CSS实现自动改变切换方向图片幻灯切换效果的方法
2015/03/02 Javascript
Javascript中this关键字的一些小知识
2015/03/15 Javascript
JavaScript利用正则表达式替换字符串中的内容
2016/12/12 Javascript
js实现符合国情的日期插件详解
2017/01/19 Javascript
vue中将网页打印成pdf实例代码
2017/06/15 Javascript
基于jQuery的$.getScript方法去加载javaScript文档解析
2017/11/08 jQuery
ejsExcel模板在Vue.js项目中的实际运用
2018/01/27 Javascript
vue中设置height:100%无效的问题及解决方法
2018/07/27 Javascript
JS实现的排列组合算法示例
2019/07/16 Javascript
websocket4.0+typescript 实现热更新的方法
2019/08/14 Javascript
Python与Java间Socket通信实例代码
2017/03/06 Python
基于Django与ajax之间的json传输方法
2018/05/29 Python
python画一个玫瑰和一个爱心
2020/08/18 Python
python 模拟贷款卡号生成规则过程解析
2019/08/30 Python
python传到前端的数据,双引号被转义的问题
2020/04/03 Python
jupyter实现重新加载模块
2020/04/16 Python
Keras模型转成tensorflow的.pb操作
2020/07/06 Python
Notino希腊:购买香水和美容产品
2019/07/25 全球购物
阿迪达斯英国官方网站:adidas英国
2019/08/13 全球购物
EJB需直接实现它的业务接口或Home接口吗,请简述理由
2016/11/23 面试题
产品销售员岗位职责
2013/12/18 职场文书
会计师职业生涯规划范文
2014/02/18 职场文书
个人担保书范文
2014/05/20 职场文书
小学师德师风演讲稿
2014/09/02 职场文书
公司员工安全协议书
2014/11/21 职场文书
六年级学生评语大全
2014/12/26 职场文书
小学体育组工作总结
2015/08/13 职场文书
golang生成vcf通讯录格式文件详情
2022/03/25 Golang
html中相对位置与绝对位置的具体使用
2022/05/15 HTML / CSS
Android开发EditText禁止输入监听及InputFilter字符过滤
2022/06/10 Java/Android