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 相关文章推荐
jQuery操作 input type=checkbox的实现代码
Jun 14 Javascript
jquery快捷动态绑定键盘事件的操作函数代码
Oct 17 Javascript
JavaScript版的TwoQueues缓存模型
Dec 29 Javascript
jquery序列化方法实例分析
Jun 10 Javascript
jQuery中通过ajax的get()函数读取页面的方法
Feb 29 Javascript
js数组去重的hash方法
Dec 22 Javascript
使用node.js搭建服务器
May 20 Javascript
jQuery使用动画队列自定义动画操作示例
Jun 16 jQuery
详解Vue源码学习之callHook钩子函数
Jul 25 Javascript
使用Typescript开发微信小程序的步骤详解
Jan 12 Javascript
浅谈react useEffect闭包的坑
Jun 08 Javascript
vue3 自定义图片放大器效果的示例代码
Jul 23 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
php+AJAX传送中文会导致乱码的问题的解决方法
2008/09/08 PHP
php压缩HTML函数轻松实现压缩html/js/Css及注意事项
2013/01/27 PHP
[原创]解决wincache不支持64位PHP5.5/5.6的问题(提供64位wincache下载)
2016/06/22 PHP
PHP仿微信多图片预览上传实例代码
2016/09/13 PHP
Yii框架中jquery表单验证插件用法示例
2016/10/18 PHP
IE7中javascript操作CheckBox的checked=true不打勾的解决方法
2009/12/07 Javascript
Js 时间函数getYear()的使用问题探讨
2013/04/01 Javascript
『jQuery』名称冲突使用noConflict方法解决
2013/04/22 Javascript
Jquery动态进行图片缩略的原理及实现
2013/08/13 Javascript
利用了jquery的ajax实现二级联互动菜单
2013/12/02 Javascript
让input框实现类似百度的搜索提示(基于jquery事件监听)
2014/01/31 Javascript
jQuery实现回车键(Enter)切换文本框焦点的代码实例
2014/05/05 Javascript
jqGrid读取选择的多行的某个属性代码
2014/05/18 Javascript
写给小白的JavaScript引擎指南
2015/12/04 Javascript
理解JavaScript表单的基础知识
2016/01/25 Javascript
JS中如何实现复选框全选功能
2016/12/19 Javascript
Vue表单及表单绑定方法
2018/09/04 Javascript
微信小程序如何连接Java后台
2019/08/08 Javascript
vue.js实现三级菜单效果
2019/10/19 Javascript
基于Electron实现桌面应用开发代码实例
2020/07/07 Javascript
python单链表实现代码实例
2013/11/21 Python
python错误处理详解
2014/09/28 Python
Python测试人员需要掌握的知识
2018/02/08 Python
Python切图九宫格的实现方法
2019/10/10 Python
Python操作列表常用方法实例小结【创建、遍历、统计、切片等】
2019/10/25 Python
Python识别html主要文本框过程解析
2020/02/18 Python
canvas绘制表情包的示例代码
2018/07/09 HTML / CSS
草莓网美国官网:Strawberrynet USA
2016/12/11 全球购物
工商学院毕业生个人自我评价
2013/09/19 职场文书
英语专业学生个人求职信范文
2014/01/06 职场文书
手机银行营销方案
2014/03/14 职场文书
三好学生评语大全
2014/12/29 职场文书
中秋节随笔
2015/08/15 职场文书
校园广播稿范文
2015/08/19 职场文书
python实现简易自习室座位预约系统
2021/06/30 Python
Redis调用Lua脚本及使用场景快速掌握
2022/03/16 Redis