vue.js中$set与数组更新方法


Posted in Javascript onMarch 08, 2018

由于 JavaScript 的限制,Vue 不能检测以下变动的数组:

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

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

当然vue中给了解决方法,就是使用 Vue.set, vm.$set(Vue.set的变种写法)或者 splice,caoncat等修改数组,同时也将触发状态更新:

ex:

vue.js中$set与数组更新方法

所以如果在实例创建后添加新的属性到实例上,则不会触发更新。

ps:现在有两个数组,分别为arr1,arr2,如果arr1以下标赋值改变数组,arr2以$set改变数组,结果是什么样呢?

data:{
 arr1 = ['a','b','c'];
 arr2 = [‘foo','bar','baz'];  
}

vm.arr1[1] = 'alpha';
vm.$set(vm.arr2, 1, 'alpha');

根据开始我们说的根据下标索引改变数组不能触发状态更新,我们会知道:第一个数组的第二项改变不会在页面更新,只有第二个数组的更改会在页面更新。然而结果却是:

arr1 = ['a', 'alpha', 'b', 'c'];
arr2 = [‘foo', 'alpha', 'bar','baz'];

两个数组的值都更新了,也就是说,arr2用$set()方法更新时,页面会全部更新一遍。

以上这篇vue.js中$set与数组更新方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Extjs学习笔记之八 继承和事件基础
Jan 08 Javascript
在JavaScript中获取请求的URL参数[正则]
Dec 25 Javascript
CodeMirror2 IE7/IE8 下面未知运行时错误的解决方法
Mar 29 Javascript
Eclipse去除js(JavaScript)验证错误
Feb 11 Javascript
深入理解Angular2 模板语法
Aug 07 Javascript
聊一聊jQuery插件uploadify使用方法
Aug 24 Javascript
Node.js实现兼容IE789的文件上传进度条
Sep 02 Javascript
纯JS单页面赛车游戏制作代码分享
Mar 03 Javascript
基于Bootstrap分页的实例讲解(必看篇)
Jul 04 Javascript
使用vue脚手架(vue-cli)搭建一个项目详解
May 09 Javascript
JS随机密码生成算法
Sep 23 Javascript
vue实现手机端省市区区域选择
Sep 27 Javascript
vue与vue-i18n结合实现后台数据的多语言切换方法
Mar 08 #Javascript
详解使用vue-cli脚手架初始化Vue项目下的项目结构
Mar 08 #Javascript
改变vue请求过来的数据中的某一项值的方法(详解)
Mar 08 #Javascript
JavaScript满天星导航栏实现方法
Mar 08 #Javascript
vue.js的computed,filter,get,set的用法及区别详解
Mar 08 #Javascript
详解从买域名到使用pm2部署node.js项目全过程
Mar 07 #Javascript
layui select动态添加option的实例
Mar 07 #Javascript
You might like
phpwind中的数据库操作类
2007/01/02 PHP
PHP利用hash冲突漏洞进行DDoS攻击的方法分析
2015/03/26 PHP
JSON字符串传到后台PHP处理问题的解决方法
2016/06/05 PHP
PHP levenshtein()函数用法讲解
2019/03/08 PHP
JS设置cookie、读取cookie、删除cookie
2015/04/17 Javascript
js控制网页前进和后退的方法
2015/06/08 Javascript
CKEditor无法验证的解决方案(js验证+jQuery Validate验证)
2016/05/09 Javascript
jquery轮播的实现方式 附完整实例
2016/07/28 Javascript
jquery判断页面网址是否有效的两种方法
2016/12/11 Javascript
Vue v2.4中新增的$attrs及$listeners属性使用教程
2018/01/08 Javascript
微信小程序实现长按删除图片的示例
2018/05/18 Javascript
快速解决vue在ios端下点击响应延时的问题
2018/08/27 Javascript
基于element-ui的rules中正则表达式
2018/09/04 Javascript
JS监听滚动和id自动定位滚动
2018/12/18 Javascript
Vue框架下引入ActiveX控件的问题解决
2019/03/25 Javascript
[04:49]期待西雅图之战 2016国际邀请赛中国区预选赛WINGS战队赛后采访
2016/06/29 DOTA
python解析模块(ConfigParser)使用方法
2013/12/10 Python
python3 读取Excel表格中的数据
2018/10/16 Python
python用post访问restful服务接口的方法
2018/12/07 Python
Python编程深度学习计算库之numpy
2018/12/28 Python
Python TCPServer 多线程多客户端通信的实现
2019/12/31 Python
python GUI库图形界面开发之PyQt5信号与槽多窗口数据传递详细使用方法与实例
2020/03/08 Python
Python3如何判断三角形的类型
2020/04/12 Python
浅谈keras使用中val_acc和acc值不同步的思考
2020/06/18 Python
Python特殊属性property原理及使用方法解析
2020/10/09 Python
Sunglasses Shop英国:欧洲领先的太阳镜在线供应商之一
2018/09/19 全球购物
新西兰购物网站:TheMarket NZ
2020/09/19 全球购物
亿企通软件测试面试题
2012/04/10 面试题
商务日语毕业生自荐信
2013/11/23 职场文书
学习保证书范文
2014/04/30 职场文书
学校社会实践活动总结
2014/07/03 职场文书
机电一体化应届生求职信
2014/08/09 职场文书
合作与交流自我评价
2015/03/09 职场文书
2016年精神文明建设先进个人事迹材料
2016/02/29 职场文书
60句有关成长的名言
2019/09/04 职场文书
判断Python中的Nonetype类型
2021/05/25 Python