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

栏目: 编程语言 · 发布时间: 7年前

内容简介:下面小编就为大家分享一篇vue.js中$set与数组更新方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

由于 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()方法更新时,页面会全部更新一遍。


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Intel系列微处理器体系结构、编程与接口

Intel系列微处理器体系结构、编程与接口

布雷, / 机械工业出版社 / 2005-4 / 99.00元

本书是讲述Intel微处理器的国外经典教材,已经多次再版,经过长期教学使用,吐故纳新,不断完善,内容丰富,体系完整。第6版中包含了微处理器领域的最新技术发展,涵盖了Pentium 4的内容。本书结合实例讲解工作原理,并给出小结和习题,既适合教学使用,也适合自学。书中许多实例都可以作为开发类似应用的模板和原型,极具实用价值。附录还给出了备查资料,供设计和调试汇编语言时使用。本书可作为高等院校计算机、......一起来看看 《Intel系列微处理器体系结构、编程与接口》 这本书的介绍吧!

HTML 编码/解码
HTML 编码/解码

HTML 编码/解码

HEX CMYK 转换工具
HEX CMYK 转换工具

HEX CMYK 互转工具

HEX HSV 转换工具
HEX HSV 转换工具

HEX HSV 互换工具