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的变量作用域深入理解
Oct 25 Javascript
JS date对象的减法处理实现代码
Dec 28 Javascript
js获取域名的方法
Jan 27 Javascript
基于Bootstrap模态对话框只加载一次 remote 数据的解决方法
Jul 09 Javascript
react-native-tab-navigator组件的基本使用示例代码
Sep 07 Javascript
JavaScript之实现一个简单的Vue示例
Jan 17 Javascript
全面分析JavaScript 继承
May 30 Javascript
javascript实现blob加密视频源地址的方法
Aug 08 Javascript
VUE+elementui组件在table-cell单元格中绘制微型echarts图
Apr 20 Javascript
vue模块移动组件的实现示例
May 20 Javascript
Vue使用axios引起的后台session不同操作
Aug 14 Javascript
WebPack工具运行原理及入门教程
Dec 02 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
Laravel+Intervention实现上传图片功能示例
2019/07/09 PHP
php 的多进程操作实践案例分析
2020/02/28 PHP
javascript CSS画图之基础篇
2009/07/29 Javascript
js获取当前select 元素值的代码
2010/04/19 Javascript
利用js的Node遍历找到repeater的一个字段实例介绍
2013/04/25 Javascript
jQuery图片轮播的具体实现
2013/09/11 Javascript
jquery实现select下拉框美化特效代码分享
2015/08/18 Javascript
JavaScript实现iframe自动高度调整和不同主域名跨域
2016/02/27 Javascript
JavaScript使用delete删除数组元素用法示例【数组长度不变】
2017/01/17 Javascript
JS轮播图实现简单代码
2021/02/19 Javascript
js时间戳与日期格式之间转换详解
2017/12/11 Javascript
webpack+vuex+axios 跨域请求数据的示例代码
2018/03/06 Javascript
JavaScript实现的鼠标跟随特效示例【2则实例】
2018/12/22 Javascript
react-router-dom 嵌套路由的实现
2020/05/02 Javascript
讲解python参数和作用域的使用
2013/11/01 Python
解决python文件字符串转列表时遇到空行的问题
2017/07/09 Python
Python实现修改文件内容的方法分析
2018/03/25 Python
NumPy.npy与pandas DataFrame的实例讲解
2018/07/09 Python
浅谈python的输入输出,注释,基本数据类型
2019/04/02 Python
python和mysql交互操作实例详解【基于pymysql库】
2019/06/04 Python
Python中使用__new__实现单例模式并解析
2019/06/25 Python
python cumsum函数的具体使用
2019/07/29 Python
python中的反斜杠问题深入讲解
2019/08/12 Python
Pytorch之parameters的使用
2019/12/31 Python
Django Serializer HiddenField隐藏字段实例
2020/03/31 Python
keras实现多种分类网络的方式
2020/06/11 Python
解释一下ArrayList Vector和LinkedList的实现和区别
2013/04/26 面试题
DBA的职责都有哪些
2012/05/16 面试题
数学专业毕业生自荐信
2013/11/10 职场文书
自我评价个人范文
2013/12/16 职场文书
幼儿园大班家长评语
2014/04/17 职场文书
会计学自荐信
2014/06/03 职场文书
五月的鲜花活动方案
2014/08/21 职场文书
2015年社区工会工作总结
2015/05/26 职场文书
五星级酒店宣传口号
2015/12/25 职场文书
python_tkinter弹出对话框创建
2022/03/20 Python