Vue 踩过的坑

数组中哪写方法是响应式的

pop，shift，unshift，push，sort，reverse

// An highlighted block
let vm = new Vue({
				el: '#app',
				data: {
					letters:['a','b','c','d']
				},
				created() {
				},
				methods: {
					changeArr() {
						// this.letters.push('aaa','bbb'); //数组尾部添加
						// this.letters.pop();//删除数组最后元素
						// this.letters.shift();//删除数组第一个元素
						// this.letters.unshift();//在数组最前面添加元素
						// this.letters.sort(); //数组排序
						// this.letters.reverse();//数组倒序
						// this.letters.splice(1,0,'aaa'); //数组第一个元素后添加aaa
						// this.letters.splice(1,1); //数组第一个元素后删除一个元素
						// this.letters.splice(1,2,'ccc','ddd')  //替换第2和第3和元素
					},
				}
			})

通过索引值修改数组元素不是响应式的，vue没有监听到数据发生变化，因此页面不会渲染

解决方法

1.使用splice方法替换
2.使用vue内部方法 Vue.set(需要改的数组，索引值，要修改的元素value)

methods: {
					changeArr() {
						// this.letters.push('aaa','bbb'); //数组尾部添加
						// this.letters.pop();//删除数组最后元素
						// this.letters.shift();//删除数组第一个元素
						// this.letters.unshift();//在数组最前面添加元素
						// this.letters.sort(); //数组排序
						// this.letters.reverse();//数组倒序
						// this.letters.splice(1,0,'aaa'); //数组第一个元素后添加aaa
						// this.letters.splice(1,1); //数组第一个元素后删除一个元素
						// this.letters.splice(1,2,'ccc','ddd')  //替换第2和第3和元素
						this.$set(this.letters,0,'aaa')
					},
				}