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
input:checkbox多选框实现单选效果跟radio一样
Jun 16 Javascript
简单易用的倒计时js代码
Aug 04 Javascript
了不起的node.js读书笔记之node的学习总结
Dec 22 Javascript
JavaScript中的异常捕捉介绍
Dec 31 Javascript
快速掌握Node.js环境的安装与运行方法
Feb 16 Javascript
jquery实现简单的瀑布流布局
Dec 11 Javascript
微信小程序 PHP后端form表单提交实例详解
Jan 12 Javascript
json2.js 入门教程之使用方法与实例分析
Sep 14 Javascript
微信小程序如何使用云开发
May 17 Javascript
element el-tree组件的动态加载、新增、更新节点的实现
Feb 27 Javascript
在vue中实现清除echarts上次保留的数据(亲测有效)
Sep 09 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
完美解决thinkphp验证码出错无法显示的方法
2014/12/09 PHP
PHP实现将浏览历史页面网址保存到cookie的方法
2015/01/26 PHP
PHP的Laravel框架中使用消息队列queue及异步队列的方法
2016/03/21 PHP
用javascript实现无刷新更新数据的详细步骤 asp
2006/12/26 Javascript
犀利的js 函数集合
2009/06/11 Javascript
学习ExtJS Column布局
2009/10/08 Javascript
jQuery学习笔记之jQuery选择器的使用
2010/12/22 Javascript
Jquery+asp.net后台数据传到前台js进行解析的方法
2014/05/11 Javascript
JS实现简单的顶部定时关闭层效果
2014/06/15 Javascript
jQuery/CSS3图片特效插件整理推荐
2014/12/07 Javascript
黑帽seo劫持程序,js劫持搜索引擎代码
2015/09/15 Javascript
莱鸟介绍javascript onclick事件
2016/01/06 Javascript
js中string和number类型互转换技巧(分享)
2016/11/28 Javascript
Node.JS 循环递归复制文件夹目录及其子文件夹下的所有文件
2017/09/18 Javascript
JS表单传值和URL编码转换
2018/03/03 Javascript
微信小程序实现单选选项卡切换效果
2020/06/19 Javascript
详解js创建对象的几种方法及继承
2019/04/12 Javascript
nodejs开发一个最简单的web服务器实例讲解
2020/01/02 NodeJs
vue中v-for循环选中点击的元素并对该元素添加样式操作
2020/07/17 Javascript
[43:24]2018DOTA2亚洲邀请赛3月29日 小组赛A组 LGD VS Liquid
2018/03/30 DOTA
使用python实现拉钩网上的FizzBuzzWhizz问题示例
2014/05/05 Python
Python实现进程同步和通信的方法
2018/01/02 Python
Python3实现的字典遍历操作详解
2018/04/18 Python
Python参数类型以及常见的坑详解
2019/07/08 Python
Python基于BeautifulSoup和requests实现的爬虫功能示例
2019/08/02 Python
python IDLE添加行号显示教程
2020/04/25 Python
Python获取浏览器窗口句柄过程解析
2020/07/25 Python
详解用python -m http.server搭一个简易的本地局域网
2020/09/24 Python
英国最大的手表网站:The Watch Hut
2017/03/31 全球购物
100%有机精油,美容油:House of Pure Essence
2018/10/30 全球购物
高尔夫球鞋、服装、手套和装备:FootJoy
2018/12/15 全球购物
社区食品安全实施方案
2014/03/28 职场文书
缓刑人员思想汇报
2014/10/11 职场文书
学习党的群众路线教育实践活动剖析材料
2014/10/13 职场文书
草房子读书笔记
2015/06/29 职场文书
Zabbix对Kafka topic积压数据监控的解决方案
2022/07/07 Servers