vue 数组和对象不能直接赋值情况和解决方法(推荐)


Posted in Javascript onOctober 25, 2017

Vue 不能检测以下变动的数组:

当你利用索引直接设置一个项时,例如:vm.items[indexOfItem] = newValue

当你修改数组的长度时,例如:vm.items.length = newLength

当第一种情况需求时,可以使用this.$set(this.arr,index,newVal)

Vue 不能检测对象属性的添加或删除:

可以使用this.$set(this.person,'age',12)

     当需要添加多个对象时,Object.assign({},this.person,{age:12,name:'wee'})

PS:Vue实现对数组、对象的深拷贝、复制

当组件间传递对象时,由于此对象的引用类型指向的都是一个地址(除了基本类型跟null,对象之间的赋值,只是将地址指向同一个,而不是真正意义上的拷贝),如下

数组:

var a = [1,2,3];
var b = a;
b.push(4); // b中添加了一个4
alert(a); // a变成了[1,2,3,4]

对象:

var obj = {a:10};
var obj2 = obj;
obj2.a = 20; // obj2.a改变了,
alert(obj.a); // 20,obj的a跟着改变

这就是由于对象类型直接赋值,只是将引用指向同一个地址,导致修改了obj会导致obj2也被修改

所以在vue中,如果多个组件引用了同一个对象作为数据,那么当其中一个组件改动对象数据时,其他对象的数据也会同步改动。有这种双向绑定的需要的话,那么自然是最好的,但如果不需要这种绑定而希望各组件的对象数据之间相互独立,即是互不关联的对象副本的话,可以用下面的方法解决

computed: { 
   data: function () { 
     var obj={}; 
     obj=JSON.parse(JSON.stringify(this.templateData)); //this.templateData是父组件传递的对象 
     return obj 
  } 
 }

总结

以上所述是小编给大家介绍的vue 数组和对象不能直接赋值情况和解决方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript学习笔记(十八) 获得页面中的元素代码
Jun 20 Javascript
通过jQuery源码学习javascript(二)
Dec 27 Javascript
jqgrid 表格数据导出实例
Nov 21 Javascript
input:checkbox多选框实现单选效果跟radio一样
Jun 16 Javascript
jQuery数据缓存用法分析
Feb 20 Javascript
js针对ip地址、子网掩码、网关的逻辑性判断
Jan 06 Javascript
Js实现简单的小球运动特效
Feb 18 Javascript
jQuery zTree树插件简单使用教程
Jan 10 Javascript
JS基于设计模式中的单例模式(Singleton)实现封装对数据增删改查功能
Feb 06 Javascript
原生js实现日历效果
Mar 02 Javascript
微信小程序返回上一级页面的实现代码
Jun 19 Javascript
浅谈JavaScript浅拷贝和深拷贝
Nov 07 Javascript
JS使用tofixed与round处理数据四舍五入的区别
Oct 25 #Javascript
javascript计算对象长度的方法
Oct 25 #Javascript
AngularJS实现的select二级联动下拉菜单功能示例
Oct 25 #Javascript
Angular4实现鼠标悬停3d倾斜效果
Oct 25 #Javascript
详解vue 组件之间使用eventbus传值
Oct 25 #Javascript
bootstrap时间控件daterangepicker使用方法及各种小bug修复
Oct 25 #Javascript
Windows安装Node.js报错:2503、2502的解决方法
Oct 25 #Javascript
You might like
提升PHP执行速度全攻略(上)
2006/10/09 PHP
PHP sprintf() 函数的应用(定义和用法)
2012/06/29 PHP
PHP实现支持GET,POST,Multipart/form-data的HTTP请求类
2014/09/24 PHP
php中socket的用法详解
2014/10/24 PHP
smarty中js的调用方法示例
2014/10/27 PHP
2014最热门的24个php类库汇总
2014/12/18 PHP
PHP 500报错的快速解决方法
2016/12/14 PHP
php过滤输入操作之htmlentities与htmlspecialchars用法分析
2017/02/17 PHP
简单实现php上传文件功能
2017/09/21 PHP
使用PHPStorm+XDebug搭建单步调试环境
2017/11/19 PHP
判断JavaScript对象是否可用的最正确方法分析
2008/10/03 Javascript
使用jQuery解决IE与FireFox下createElement方法的差异
2013/11/14 Javascript
node.js连接mongoDB数据库 快速搭建自己的web服务
2016/04/17 Javascript
JS对HTML表格进行增删改操作
2016/08/22 Javascript
微信小程序scroll-view实现横向滚动和上拉加载示例
2017/03/06 Javascript
Bootstrap学习笔记之进度条、媒体对象实例详解
2017/03/09 Javascript
微信通过页面(H5)直接打开本地app的解决方法
2017/09/09 Javascript
微信小程序实现发送验证码按钮效果
2018/12/20 Javascript
这样回答继承可能面试官更满意
2019/12/10 Javascript
JavaScript代码实现微博批量取消关注功能
2021/02/05 Javascript
Python 条件判断的缩写方法
2008/09/06 Python
Python遍历目录并批量更换文件名和目录名的方法
2016/09/19 Python
Python的SimpleHTTPServer模块用处及使用方法简介
2018/01/22 Python
Python文本处理简单易懂方法解析
2019/12/19 Python
Python xlwt模块使用代码实例
2020/06/10 Python
Python中使用aiohttp模拟服务器出现错误问题及解决方法
2020/10/31 Python
法律专业个人实习自我鉴定
2013/09/23 职场文书
编辑找工作求职信分享
2014/01/03 职场文书
大学军训感言300字
2014/03/09 职场文书
竞选大队长演讲稿
2014/04/29 职场文书
会议欢迎标语
2014/06/30 职场文书
工作失职检讨书500字
2014/10/17 职场文书
房租涨价通知
2015/04/23 职场文书
2015年秋学期师德师风建设工作总结
2015/10/23 职场文书
学习经验交流会演讲稿
2015/11/02 职场文书
七年级作文之英语老师
2019/10/28 职场文书