vue框架开发中遇到关于data数据修改，页面不刷新问题处理是常见遇到问题和面试中经常会被稳到的问题之一。

本文就来介绍如何解决数据改变页面不刷新问题。

一、数据强刷

    数据强刷可能是部分开发者经常会使用到方式之一。

this.$forceUpdate()

二、this.$set()修改、设置数据

    官方对这个API的解释就是使用这个api修改的数据会为其添加响应式getter和setter让其拥有数据响应的特性

    this.$set(要操作的对象或数组, 要新增或者修改的数组或对象key, 对应的值)

//json数据
export default {
	data() {
		return {
			show:{
				name:'张三',
				class:'四年级'
			},
		}
	},
	methods: {
		changeText(){
			this.$set(this.show,'age',14)
		}
	}
}

三、Object.assign生成新数据赋值data

    Object.assign能拷贝合成一个新对象,所以我们只需要将要修改的值合并成一个新对象然后赋值给data中的对象或数组,这样栈的指向被修改了.触发视图更新

//json数据
export default {
	data() {
		return {
			show:{
				name:'张三',
				class:'四年级'
			},
		}
	},
	methods: {
		changeText(){
			this.show = Object.assign({}, {...this.show,age:12})
		}
	}
}

四、使用if特性静默刷新

<template>
	<view>
		<template v-if="showBox">
			<view v-for="(item,index) in show" :key="index" class="">
				{{item}}
			</view>
		</template>
		<button @click="changeText">新增年龄</button>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				showBox:true,
				show:{
					name:'张三',
					class:'四年级'
				},
			}
		},
		methods: {
			changeText(){
				this.showBox = false
				this.show.age = 14
				delete this.show.class
				this.$nextTick(()=>{
					this.showBox = true
				})
			}
		}
	}
</script>

以上便是常见的四种处理方式，开发中需要根据实际情况来选择适合当前项目的方式。