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活用事件触发对象动作
Aug 10 Javascript
让你的博客飘雪花超出屏幕依然看得见
Jan 04 Javascript
简易js代码实现计算器操作
Apr 15 Javascript
javascript实现促销倒计时+fixed固定在底部
Sep 18 Javascript
Knockout text绑定DOM的使用方法
Nov 15 Javascript
js鼠标滑轮滚动事件绑定的简单实例(兼容主流浏览器)
Jan 14 Javascript
js带闹铃功能的倒计时代码
Sep 29 Javascript
原生js验证简洁注册登录页面
Dec 17 Javascript
JavaScript树的深度优先遍历和广度优先遍历算法示例
Jul 30 Javascript
Vue通过ref父子组件拿值方法
Sep 12 Javascript
Vue图片浏览组件v-viewer用法分析【支持旋转、缩放、翻转等操作】
Nov 04 Javascript
Vue-cli打包后部署到子目录下的路径问题说明
Sep 02 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和ACCESS写聊天室(六)
2006/10/09 PHP
php缩小png图片不损失透明色的解决方法
2013/12/25 PHP
CentOS 6.3下安装PHP xcache扩展模块笔记
2014/09/10 PHP
摘自织梦CMS中的图片处理类
2015/08/08 PHP
thinkphp5框架结合mysql实现微信登录和自定义分享链接与图文功能示例
2019/08/13 PHP
javascript之dhDataGrid Ver2.0.0代码
2007/07/01 Javascript
文本框输入时 实现自动提示(像百度、google一样)
2012/04/05 Javascript
jQuery中:visible选择器用法实例
2014/12/30 Javascript
javascript简单实现滑动菜单效果的方法
2015/07/27 Javascript
jquery实现点击弹出可放大居中及关闭的对话框(附demo源码下载)
2016/05/10 Javascript
简单实现jQuery进度条轮播实例代码
2016/06/20 Javascript
Javascript生成带参数的二维码示例
2016/10/10 Javascript
jQuery Form表单取值的方法
2017/01/11 Javascript
js实现拖拽功能
2017/03/01 Javascript
Canvas放置反弹效果随机图形(实例)
2017/08/17 Javascript
node内置调试方法总结
2018/02/22 Javascript
使用Node搭建reactSSR服务端渲染架构
2018/08/30 Javascript
vue-form表单验证是否为空值的实例详解
2019/10/29 Javascript
JS实现前端动态分页码代码实例
2020/06/02 Javascript
python中如何使用朴素贝叶斯算法
2017/04/06 Python
PyQt5每天必学之工具提示功能
2018/04/19 Python
numpy使用fromstring创建矩阵的实例
2018/06/15 Python
python获取微信企业号打卡数据并生成windows计划任务
2019/04/30 Python
JINS眼镜官方网站:日本最大的眼镜邮购
2016/10/14 全球购物
英国知名美妆护肤在线商城:Zest Beauty
2018/04/24 全球购物
猫咪家具:CatsPlay
2018/11/03 全球购物
英国户外服装、鞋类和设备的领先零售商:Millets
2020/10/12 全球购物
会计自荐书
2013/12/02 职场文书
总经理司机职责
2014/02/02 职场文书
创业者迈进成功第一步:如何写创业计划书?
2014/03/22 职场文书
运动会口号大全
2014/06/07 职场文书
中学生2014国庆节演讲稿:不屈的民族
2014/09/21 职场文书
个人廉政承诺书
2015/04/28 职场文书
2015年城乡环境综合治理工作总结
2015/07/24 职场文书
协议书格式模板
2016/03/24 职场文书
分析设计模式之模板方法Java实现
2021/06/23 Java/Android