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开发技术大全-第3章 js数据类型
Jul 03 Javascript
JS模拟自动点击的简单实例
Aug 08 Javascript
Jqgrid设置全选(选择)及获取选择行的值示例代码
Dec 28 Javascript
自制的文件上传JS控件可支持IE、chrome、firefox etc
Apr 18 Javascript
鼠标移到图片上变大显示而不是放大镜效果
Jun 15 Javascript
原生js实现图片层叠轮播切换效果
Feb 02 Javascript
轮播的简单实现方法
Jul 28 Javascript
jQuery过滤选择器经典应用
Aug 18 Javascript
Bootstrap栅格系统简单实现代码
Mar 06 Javascript
解决ie img标签内存泄漏的问题
Oct 13 Javascript
学习node.js 断言的使用详解
Mar 18 Javascript
微信小程序和H5页面间相互跳转代码实例
Sep 19 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
一个多文件上传的例子(原创)
2006/10/09 PHP
PHP简单读取PDF页数的实现方法
2016/07/21 PHP
一个简单安全的PHP验证码类、PHP验证码
2016/09/24 PHP
jQuery中die()方法用法实例
2015/01/19 Javascript
百度地图API之本地搜索与范围搜索
2015/07/30 Javascript
javascript获取系统当前时间的方法
2015/11/19 Javascript
JQuery核心函数是什么及使用方法介绍
2016/05/03 Javascript
jQuery中delegate()方法的用法详解
2016/10/13 Javascript
基于JavaScript实现右键菜单和拖拽功能
2016/11/28 Javascript
js代码实现下拉菜单【推荐】
2016/12/15 Javascript
javascript设计模式之模块模式学习笔记
2017/02/15 Javascript
基于jQuery实现手风琴菜单、层级菜单、置顶菜单、无缝滚动效果
2017/07/20 jQuery
React-Native使用Mobx实现购物车功能
2017/09/14 Javascript
解决使用Vue.js显示数据的时,页面闪现原始代码的问题
2018/02/11 Javascript
Vue.js 实现数据展示全部和收起功能
2018/09/05 Javascript
Vuex,iView UI面包屑导航使用扩展详解
2019/11/04 Javascript
vue-property-decorator用法详解
2019/12/12 Javascript
跟老齐学Python之有容乃大的list(3)
2014/09/15 Python
基于wxpython开发的简单gui计算器实例
2015/05/30 Python
pyqt5自定义信号实例解析
2018/01/31 Python
unittest+coverage单元测试代码覆盖操作实例详解
2018/04/04 Python
python GUI库图形界面开发之PyQt5打开保存对话框QFileDialog详细使用方法与实例
2020/02/27 Python
python实现秒杀商品的微信自动提醒功能(代码详解)
2020/04/27 Python
使用HTML5在网页中嵌入音频和视频播放的基本方法
2016/02/22 HTML / CSS
西班牙太阳镜品牌:Hawkers
2018/03/11 全球购物
写一个用矩形法求定积分的通用函数
2012/11/08 面试题
师范大学毕业自我鉴定
2013/11/21 职场文书
优秀教师获奖感言
2014/01/31 职场文书
党的群众路线教育实践活动宣传方案
2014/02/23 职场文书
文案策划专业自荐信
2014/07/07 职场文书
2014各大专业毕业生自我评价
2014/09/17 职场文书
乡党委干部党的群众路线教育实践活动个人对照检查材料思想汇报
2014/10/01 职场文书
图书馆义工感想
2015/08/07 职场文书
公安忠诚教育心得体会
2016/01/23 职场文书
Python 处理表格进行成绩排序的操作代码
2021/07/26 Python
Ruby处理YAML和json数据
2022/04/18 Ruby