Vue中数组更新，达到更新数组的几种方法

最近面试问道和平时工作中用到：改变了数组内的值，但是页面没有重新渲染，今天记录下解决方法

直接修改不生效，代码如下

<template>
	<div>
		<h2>数组展示：{
         
  {testArr}}</h2>
		<button @click="changeArr">修改数组</button>
	</div>
</template>

<script>
	export default {
		name: "fun",
		data: function() {
			return {
				testArr:["a","b","c","d"]
			}
		},
		methods: {
			changeArr(){
			    // 这样直接修改数组是没用的，页面不会重新渲染
				this.testArr[1] = "w"
				console.log(this.testArr)
			}
		}
	}
</script>

第一种方法：Vue.set

changeArr(){
	// 这样直接修改数组是没用的，页面不会重新渲染
	this.testArr[1] = "w";

	//第一种方法： 用set来更新数据
	this.$set(this.testArr, 1, "Q")
	console.log(this.testArr)
}

该方法也能给对象新增属性，并更新试图： 给obj对象新增"newAttr"属性，并赋值为"hello world"; this.$set(this.obj, ‘newAttr’, ‘hello world’)

第二种方法：数组splice方法

changeArr(){
	// 第二种方法 splice
	this.testArr.splice(1, 1, "R")
	console.log(this.testArr)
}

第三种方法：this.$forceUpdate()强制刷新

changeArr(){
	// 第三种方法： this.$forceUpdate()强制刷新
	this.testArr[1] = "G"
	this.$forceUpdate();
	console.log(this.testArr)
}

第四种方法：es6 "…"扩展运算符

changeArr(){
	// 第四种方法： es6 "..."扩展运算符
	this.testArr[1] = "Y"
	this.testArr = [...this.testArr]
	console.log(this.testArr)
}