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 相关文章推荐
一个用js实现控制台控件的代码
Sep 04 Javascript
JavaScript实现从数组中选出和等于固定值的n个数
Sep 03 Javascript
node.js中的fs.writeFileSync方法使用说明
Dec 14 Javascript
jQuery中after()方法用法实例
Dec 25 Javascript
关于vue-router路径计算问题
May 10 Javascript
Vue 创建组件的两种方法小结(必看)
Feb 23 Javascript
微信小程序url传参写变量的方法
Aug 09 Javascript
详解JavaScript作用域和作用域链
Mar 19 Javascript
VUE脚手架具体使用方法
May 20 Javascript
Websocket 向指定用户发消息的方法
Jan 09 Javascript
React中获取数据的3种方法及优缺点
Feb 18 Javascript
javascript实现前端分页功能
Nov 26 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设计模式之简单工厂模式详解
2014/09/04 PHP
smarty模板引擎之配置文件数据和保留数据
2015/03/30 PHP
Laravel执行migrate命令提示:No such file or directory的解决方法
2016/03/16 PHP
Laravel中七个非常有用但很少人知道的Carbon方法
2017/09/21 PHP
Centos7 Yum安装PHP7.2流程教程详解
2019/07/02 PHP
PHP7 新增功能
2021/03/09 PHP
javascript 在网页中的运用(asp.net)
2009/11/23 Javascript
JSQL SQLProxy 的 php 版本代码
2010/05/05 Javascript
JQuery中使用Ajax赋值给全局变量异常的解决方法
2014/01/10 Javascript
JavaScript获取元素尺寸和大小操作总结
2015/02/27 Javascript
jQuery的内容过滤选择器学习教程
2016/04/18 Javascript
深入理解JQuery中的事件与动画
2016/05/18 Javascript
js中获取时间new Date()的全面介绍
2016/06/20 Javascript
3种不同的ContextMenu右键菜单实现代码
2016/11/03 Javascript
Ajax与服务器(JSON)通信实例代码
2016/11/05 Javascript
JavaScript中双符号的运算详解
2017/03/12 Javascript
js实现把时间戳转换为yyyy-MM-dd hh:mm 格式(es6语法)
2017/12/28 Javascript
Vue-cli3项目配置Vue.config.js实战记录
2018/07/29 Javascript
bootstrap下拉框动态赋值方法
2018/08/10 Javascript
jQuery使用bind动态绑定事件无效的处理方法
2018/12/11 jQuery
Angular7创建项目、组件、服务以及服务的使用
2019/02/19 Javascript
微信小程序webview 脚手架使用详解
2019/07/22 Javascript
[01:03:00]DOTA2上海特级锦标赛A组败者赛 EHOME VS CDEC第一局
2016/02/25 DOTA
Python 遍历子文件和所有子文件夹的代码实例
2016/12/21 Python
浅谈django开发者模式中的autoreload是如何实现的
2017/08/18 Python
Python Flask框架扩展操作示例
2019/05/03 Python
python实现定时发送邮件
2020/12/23 Python
美国蔬菜和植物种子公司:Burpee
2017/02/01 全球购物
墨尔本最受欢迎的复古风格品牌:Princess Highway
2018/12/21 全球购物
医药代表个人求职信范本
2013/12/19 职场文书
母亲节演讲稿范文
2014/01/02 职场文书
公司担保书格式范文
2014/05/12 职场文书
演讲比赛的活动方案
2014/08/28 职场文书
2015年全国爱眼日活动方案
2015/05/05 职场文书
演讲稿之感恩老师(三篇范文)
2019/09/06 职场文书
sqlserver2017共享功能目录路径不可改的解决方法
2021/04/16 SQL Server