Vue 数组

数组的变异方法

因为js中数组的原始方法都不是响应式，所以Vue创造了同名变异方法

修改原数组

1. push
2. pop
3. shift
4. unshift
5. splice
6. sort
7. reverse

返回新数组

8. filter
9. concat
10. slice

splice和slice

除了返回原数组和新数组
splice的第二个参数是截取数量
slice的第二个参数是索引

修改响应式的数组

错误的：数组[索引]=新值 （数组改变了，但是页面没有重新渲染）
正确的：Vue.set(数组，索引，新值)
或者在Vue内部操作this.$set(数组，索引，新值) （重新渲染）

当然，变异方法会触发渲染，比如push追加数组对象，但这不是修改原值。
或者重新赋值整个数组，但操作消耗加大
一般修改原值还是要用this.$set

修改对象也可以this.$set(对象，属性名，新值）

<template>
  <div>
		<ul>
			<li v-for="item in list" v-text="item"></li>
		</ul>
		<el-button type="primary" @click="handle">+1</el-button>
    <el-button type="primary" @click="handle2">+1响应式</el-button>
  </div>
</template>

<script>
export default {
  name: 'App',
	data(){
		return {
			list:[1,2,3,4,5]
		}
	},
	methods:{
		handle(){
			this.list[0]=0
      		console.log(this.list);
		},
	    handle2(){
	    	this.$set(this.list,5,100)
	      	console.log(this.list);
	    }
	}
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

如forEach,some之类的方法

他们并不改变原数组，所以会触发响应式。
如果通过其他方法，而不是变异方法，去改变原数组，肯定不会触发响应式。
如果数据被重新渲染，那么也是后续其他操作触发了重新渲染。