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最新动画教程+iso光盘下载
Jan 22 Javascript
jQuery Ajax使用 全解析
Dec 15 Javascript
用jQuery与JSONP轻松解决跨域访问的问题
Feb 04 Javascript
JavaScript语言精粹经典实例(整理篇)
Jun 07 Javascript
Angularjs 制作购物车功能实例代码
Sep 14 Javascript
AngularJS指令用法详解
Nov 02 Javascript
ReactJS实现表单的单选多选和反选的示例
Oct 13 Javascript
vue.js中引入vuex储存接口数据及调用的详细流程
Dec 14 Javascript
详解微信小程序获取当前时间及日期的方法
Apr 28 Javascript
微信小程序scroll-view的滚动条设置实现
Mar 02 Javascript
JavaScript 禁止用户保存图片的实现代码
Apr 28 Javascript
vue路由切换时取消之前的所有请求操作
Sep 01 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
ThinkPHP实现一键清除缓存方法
2014/06/26 PHP
Web程序工作原理详解
2014/12/25 PHP
Discuz论坛密码与密保加密规则
2016/12/19 PHP
PHP实现时间比较和时间差计算的方法示例
2017/07/24 PHP
boxy基于jquery的弹出层对话框插件扩展应用 弹出层选择器
2010/11/21 Javascript
JavaScript执行效率与性能提升方案
2012/12/21 Javascript
jQuery中的read和JavaScript中的onload函数的区别
2014/08/27 Javascript
JavaScript极简入门教程(一):基础篇
2014/10/25 Javascript
使用JQuery中的trim()方法去掉前后空格
2016/09/16 Javascript
Bootstrap响应式侧边栏改进版
2016/09/17 Javascript
BootStrap实现鼠标悬停下拉列表功能
2017/02/17 Javascript
jQuery使用eraser.js插件实现擦除、刮刮卡效果的方法【附eraser.js下载】
2017/04/28 jQuery
Angular整合zTree的示例代码
2018/01/24 Javascript
node实现基于token的身份验证
2018/04/09 Javascript
在Linux上安装Python的Flask框架和创建第一个app实例的教程
2015/03/30 Python
Python实现读取文件最后n行的方法
2017/02/23 Python
基于python OpenCV实现动态人脸检测
2018/05/25 Python
python二维列表一维列表的互相转换实例
2018/07/02 Python
对Python中list的倒序索引和切片实例讲解
2018/11/15 Python
pytorch如何冻结某层参数的实现
2020/01/10 Python
简单了解Java Netty Reactor三种线程模型
2020/04/26 Python
Pytorch mask-rcnn 实现细节分享
2020/06/24 Python
windows10在visual studio2019下配置使用openCV4.3.0
2020/07/14 Python
CSS3的first-child选择器实战攻略
2016/04/28 HTML / CSS
浅析css3中matrix函数的使用
2016/06/06 HTML / CSS
纯css实现照片墙3D效果的示例代码
2017/11/13 HTML / CSS
eDreams巴西:廉价机票,酒店优惠和度假套餐
2017/04/14 全球购物
UGG澳洲官网:UGG Australia
2018/04/26 全球购物
GWT (Google Web Toolkit)有哪些主要的原件组成?
2015/06/08 面试题
《水上飞机》教学反思
2014/04/10 职场文书
初中生评语大全
2014/04/24 职场文书
大学生入党群众意见书
2015/06/02 职场文书
秋收起义观后感
2015/06/11 职场文书
植树节新闻稿
2015/07/17 职场文书
深入理解python协程
2021/06/15 Python
Python pyecharts绘制条形图详解
2022/04/02 Python