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 得到当前页面高度和宽度的两个函数
Feb 21 Javascript
基于Jquery的开发个代阴影的对话框效果代码
Jul 28 Javascript
js带按钮的提示框可供选择示例代码
Sep 17 Javascript
jQuery内存泄露解决办法
Dec 13 Javascript
jQuery实现二维码扫描功能
Jan 09 Javascript
Vuex之理解Mutations的用法实例
Apr 19 Javascript
javaScript产生随机数的用法小结
Apr 21 Javascript
解决vue 界面在苹果手机上滑动点击事件等卡顿问题
Nov 27 Javascript
vue源码nextTick使用及原理解析
Aug 13 Javascript
vue+echarts实现动态折线图的方法与注意
Sep 01 Javascript
js canvas实现俄罗斯方块
Oct 11 Javascript
vue3中provide && inject的使用
Jul 01 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中array_merge和array相加的区别分析
2013/06/17 PHP
php session劫持和防范的方法
2013/11/12 PHP
PHP清除字符串中所有无用标签的方法
2014/12/01 PHP
PHPWind9.0手动屏蔽验证码解决后台关闭验证码但是依然显示的问题
2016/08/12 PHP
javascript引用对象的方法
2007/01/11 Javascript
一段利用WSH修改和查看IP配置的代码
2008/05/11 Javascript
jQuery动态地获取系统时间实现代码
2013/05/24 Javascript
js保留小数点后几位的写法
2014/01/03 Javascript
使用js判断当前时区TimeZone是否是夏令时
2014/02/23 Javascript
JavaScript link方法入门实例(给字符串加上超链接)
2014/10/17 Javascript
jQuery设置单选按钮radio选中/不可用的实例代码
2016/06/24 Javascript
微信小程序实战之运维小项目
2017/01/17 Javascript
详解vue-cli + webpack 多页面实例应用
2017/04/25 Javascript
jquery.pagination.js分页使用教程
2018/10/23 jQuery
Vue+Element UI+Lumen实现通用表格分页功能
2019/02/02 Javascript
浅谈vue在html中出现{{}}的原因及解决方式
2020/11/16 Javascript
Python深入学习之闭包
2014/08/31 Python
Python工程师面试题 与Python基础语法相关
2016/01/14 Python
python实现折半查找和归并排序算法
2017/04/14 Python
使用Flask-Cache缓存实现给Flask提速的方法详解
2019/06/11 Python
python安装virtualenv虚拟环境步骤图文详解
2019/09/18 Python
使用python将最新的测试报告以附件的形式发到指定邮箱
2019/09/20 Python
keras 简单 lstm实例(基于one-hot编码)
2020/07/02 Python
css3使网页、图片变成灰色兼容大多数浏览器
2014/07/02 HTML / CSS
HTML5 虚拟键盘出现挡住输入框的解决办法
2017/02/14 HTML / CSS
现在输入n个数字,以逗号,分开;然后可选择升或者降序排序;按提交键就在另一页面显示按什么排序,结果为,提供reset
2012/11/09 面试题
现场施工员岗位职责
2014/03/10 职场文书
销售提升方案
2014/06/07 职场文书
计划生育宣传标语
2014/06/21 职场文书
初中国旗下的演讲稿
2014/08/28 职场文书
初中班级口号霸气押韵
2015/12/24 职场文书
JavaScript 去重和重复次数统计
2021/03/31 Javascript
vue基于Teleport实现Modal组件
2021/05/31 Vue.js
CSS 使用 resize 实现图片拖拽切换预览功能(强大功能)
2021/08/23 HTML / CSS
使用CSS自定义属性实现骨架屏效果
2022/06/21 HTML / CSS
Nginx使用ngx_http_upstream_module实现负载均衡功能示例
2022/08/05 Servers