近来在用Vue做项目的时刻,常常碰到一个题目,当数据转变以后,视图却没有革新,下面我就总结一下我在开辟过程当中碰到的几种视图没法革新的状况,不一定周全~!为了轻易演示,我们来建立一个最最简朴的demo。
//html
<div id="test"></div>
//js
var app = new Vue({
el:'#test',
data:{
msg:"Vue大法好!"
}
});
一、直接用索引值转变数组的某个值,或许直接转变数组的长度
题目形貌:有关于数组的转变而激发的视图革新应该是最常见的题目了,在Vue
官方文档中提到, 因为 JavaScript
的限定, 当你应用索引直接设置一个项,或许直接转变数组的长度时,Vue
将不会检测到数据的变化。
像上图的两种写法,将没法革新视图,只要运用文档中列出来的数组要领,才完成数据的转变,包含push()
、pop()
、shift()
、unshift()
、splice()
、reverse()
、sort()
。实在这些列出来的数组的方都是能转变原数组的,所以能够被watcher监测到,从而激发视图的从新衬着,道理雷同,这边就不逐一的测试啦~列出下面一个作为参考:
那末假如只想要转变数组中某一个数据的值,能够运用的要领有两种:
1、运用splice()
要领,删除并替代原数组中的值
2、运用Vue
供应的set
要领