vue开发过程中，数据更改，但是不渲染

以下几个方法可以渲染

方法一（推荐）

通常是某个渲染的数组改变了层级较深的数据导致页面没有实时渲染

JSON.parse(JSON.stringify(objectOrArray))

//通常是某个渲染的数组改变了层级较深的数据导致页面没有实时渲染
this.items=JSON.parse(JSON.stringify(this.items))

方法二

:key

给没有渲染改变数据的html元素加入:key=“update”
每次修改数据的时候在后面加一句this.update=!this.update;就可以刷新渲染了

<template>
	<view :key="update"></view>
</template>
<script>
	export default {
		data() {
			return {
				update:false
			}
		},
		mounted(){
			this.$nextTick(() => {
				this.update=!this.update;
			})
		}
	}
</script>

方法三

$set

<script>
	export default {
		data() {
			return {
				newVal: { oldVal: "旧的值" }
			}
		},
		mounted(){
			this.$set(this.newVal,"oldVal","新的值");
		}
	}
</script>

方法四

$forceUpdate

<script>
	export default {
		data() {
			return {}
		},
		mounted(){
			//在修改数据之后加入this.$forceUpdate()
			this.$nextTick(() => {
				this.$forceUpdate()
			})
		}
	}
</script>

方法五

v-if

给需要刷新数据点html标签加上v-if，让其重新渲染（笨办法）

<template>
	<view v-if="update"></view>
</template>
<script>
	export default {
		data() {
			return {
				update:false
			}
		},
		mounted(){
			this.$nextTick(() => {
				this.update=!this.update;
			})
		}
	}
</script>

方法六（不推荐）

直接刷新整个网页

location.replace(“”)