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 相关文章推荐
JavaScript中统计Textarea字数并提示还能输入的字符
Jun 10 Javascript
教你用jquery实现iframe自适应高度
Jun 11 Javascript
jquery向上向下取整适合分页查询
Sep 06 Javascript
javascript实现日期格式转换
Dec 16 Javascript
laypage分页控件使用实例详解
May 19 Javascript
jQuery绑定自定义事件的魔法升级版
Jun 30 Javascript
js鼠标跟随运动效果
Mar 11 Javascript
JScript实现地址选择功能
Aug 15 Javascript
浅谈Angular路由复用策略
Oct 04 Javascript
js保留两位小数方法总结
Jan 31 Javascript
koa2使用ejs和nunjucks作为模板引擎的使用
Nov 27 Javascript
轻松解决JavaScript定时器越走越快的问题
May 13 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
快速配置PHPMyAdmin方法
2008/06/05 PHP
PHP CodeIgniter框架的工作原理研究
2015/03/30 PHP
PHP模板引擎smarty详细介绍
2015/05/26 PHP
laravel 中某一字段自增、自减的例子
2019/10/11 PHP
javascript 构建一个xmlhttp对象池合理创建和使用xmlhttp对象
2010/01/15 Javascript
基于jquery的拖动布局插件
2011/11/25 Javascript
使用jQuery清空file文件域的解决方案
2013/04/12 Javascript
解析Jquery的LigerUI如何实现文件上传
2013/07/09 Javascript
js判断字符长度以及中英文数字等
2013/12/31 Javascript
JavaScript中this的9种应用场景及三种复合应用场景
2015/09/12 Javascript
JavaScript获取对象在页面中位置坐标的方法
2016/02/03 Javascript
js+css实现回到顶部按钮(back to top)
2016/03/02 Javascript
BootStrap CSS全局样式和表格样式源码解析
2017/01/20 Javascript
详解Weex基于Vue2.0开发模板搭建
2017/03/20 Javascript
Javascript ES6中对象类型Sets的介绍与使用详解
2017/07/17 Javascript
使用vuex的state状态对象的5种方式
2018/04/19 Javascript
[23:21]Ti4 冒泡赛第二轮DK vs C9 2
2014/07/14 DOTA
[36:09]Secret vs VG 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.24
2019/09/10 DOTA
Python读写Excel文件的实例
2013/11/01 Python
Python lxml模块安装教程
2015/06/02 Python
python切片的步进、添加、连接简单操作示例
2019/07/11 Python
python django中8000端口被占用的解决
2019/12/17 Python
基于python+selenium的二次封装的实现
2020/01/06 Python
python中for in的用法详解
2020/04/17 Python
HTML5实现签到 功能
2018/10/09 HTML / CSS
加拿大奢华时装品牌:Mackage
2018/01/10 全球购物
总经理秘书工作职责
2013/12/26 职场文书
护士自我评价范文
2014/01/25 职场文书
信用社员工先进事迹材料
2014/02/04 职场文书
党员党性分析材料
2014/02/17 职场文书
设计大赛策划方案
2014/06/13 职场文书
交警正风肃纪剖析材料
2014/10/29 职场文书
2014年数学教师工作总结
2014/12/03 职场文书
六年级小学生评语
2014/12/26 职场文书
六一儿童节开幕词
2015/01/29 职场文书
爱护环境建议书
2015/09/14 职场文书